How to wrap setState in React?

Question

React

During the execution of an asynchronous request, the component is unmounted, but upon execution of the promise, it is indicated to perform a state change. How, without manually tracking whether a component is mounted or not, to prevent an attempt to change the state? React now throws a warning to the console. It works, but I would like to do without a warning.

Answer 1

Option 1:

class Example extends React.Component {
  state = { data: [] };

  controller = new AbortController();
 
 componentDidMount() {
    fetch('/url', {
      signal: this.controller.signal,
    })
    .then(res => res.json())
    .then(data => this.setState({ data }));
  }
  
  componentWillUnmount() {
    this.controller.abort();
  }
  
  render(){
    return ( /* ... */ );
  }
}

If using axios: Cancellation
Option 2:
Use Redux and make requests in asynchronous actions, updating when the store response returns.