How to update a React.js component?

Question

React

There is such a thing

<Route path="/" component={App}>
      <IndexRoute component={Main} />
      <Route path="data" component={Data} />
      <Route path="about" component={About} />
    </Route>

How can I make this page reload once a second for all users who opened data, not using the window.location.reload () method, but somehow more kosher?

Answer 1

in the Data component:

componentDidMount() {
   this.refresher = setInterval(1000, () => this.forceUpdate())
}

componentWillUnmount() {
   clearInterval(this.refresher)
}

This is answering the question. But in general - if the component itself does not redraw the page, then the data in the props / state has not changed, which means render will return the same result. It would be correct to subscribe to the data stream (via websocket or long pulling - it doesn't matter) and render changes only when something has really changed. I understand that page reloading in this case will replace the data refresh - it's not necessary, it's better.