React warning about setState in unmounted component

I had a similar problem, but I did figure out the reason behind the same, so here is the snippet of code where I was encountering this err.

Warning: Can't call setState (or forceUpdate) on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.

Cause:

   this.setState({ showLoader: true });
    const { username } = this.state;
    const URL = `https://api.github.com/users/${username}`;
    try {
      const { data } = await axios(URL);
      this.props.apiData(data);
      this.props.history.push("profile");
    } catch (e) {
      console.error(e);
    }
    this.setState({ showLoader: false });

As you can see in the code-snippet, I was doing

this.props.history.push("profile");

before setting the state.

this.setState({ showLoader: false });

And then err seems to be legit in this case as I was redirecting to a different component and then setting the state on the component I was earlier.

Solution:

By placing

this.setState({ showLoader: false });

above the this.props.history.push("profile"); solved the problem.

I hope this helps.

I had the same error time ago and it was generated by a component which was using ref tag, and there was some manual manipulation.

A good practice to see these kind of errors is drawing your app flow and see when your are calling setState.

Another thing I would change if I were you is componentDidMount instead of componentWillMount to check some data. Take into account fb deprecated this functionality.

This lifecycle was previously named componentWillMount. That name will continue to work until version 17. Use the rename-unsafe-lifecycles codemod to automatically update your components.

Reactjs component documentation