Where to call fetch?

Question

React

Good afternoon. I have a table with data and a checkbox. By default, it is in the new position and pulls data from the back according to the corresponding fetch (data from which is written to the state) and other data in the all position. The question is where exactly should I make the initial call. If in the render (which is obviously bad, then it will call the method 2 times, because after the setstate it will go into the render again), if in the did mount component, then the call will be only 1 (it is not possible to call it forcibly, the fetch should occur depending on checkbox). Thanks in advance.

Answer 1

class Example extends React.Component {
  state = { filter: 'all' };

  componentDidMount() {
    this.props.fetchData(this.state.filter);
  }

  componentDidUpdate(prevProps, prevState) {
    if (prevState.filter !== this.state.filter) {
       this.props.fetchData(this.state.filter);
    }
  }
  
  render() { /* ... */ }
}

Answer 2

The first fetch in didMount, all subsequent fetches on the onChange event on the checkbox.
If you call it in the render, it will be called endlessly and this will all end)

Answer 3

Author, don't worry https://codesandbox.io/s/821z9l0ym8