Can't get rid of: Warning: Can't perform a React state update on an unmounted component

Question

Full warning message: Warning: Can't perform a React state update 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 a useEffect cleanup function.

This warning is NOT showing constant, it shows whenever it feels like. MOST TIMES when the app just started.

export default class something extends React.Component {
  _isMounted = false;
  state = {
    
  };

componentDidMount() {
    this._isMounted = true;
    firebase = new Fire((error, user) => {
      if (error) {
        return alert('something something something something');
      }

      firebase.getLists((lists) => {
        this.setState({ lists, user }, () => {
            this.setState({ loading: false });
        });
      });
      this.setState({ user });
    });
  }

componentWillUnmount() {
    this._isMounted = true;
    firebase.detach();
  }

this is in an another file that contains all the firebase code

detach() {
    this.unsubscribe();
  }

My guess it has to do with detach firebase.detach

Have you tried implementing the proposed solutions in this [question](https://stackoverflow.com/questions/53949393/cant-perform-a-react-state-update-on-an-unmounted-component)? — Tejogol, Oct 18 '20 at 17:52
Are you still getting the same error after adding the ` _isMounted` variable as per the question I shared above? If so, can you please update your question to reflect your implementation. — Tejogol, Oct 21 '20 at 13:56
This may be your answer https://stackoverflow.com/questions/53949393/cant-perform-a-react-state-update-on-an-unmounted-component — Nooruddin Lakhani, Oct 22 '20 at 08:28

score 0 · Accepted Answer · answered Oct 22 '20 at 17:48

There are a few minor updates that are needed in your code for it to work correctly.

You'll want to check if _isMounted is true before updating any state variables.

You'll also want to set _isMounted=false in componentWillUnmount() instead of _isMounted=true.

See the updated code below:

export default class something extends React.Component {
  _isMounted = false;
  state = {
    
  };

componentDidMount() {
    this._isMounted = true;
    firebase = new Fire((error, user) => {
      if (error) {
        return alert('something something something something');
      }

      firebase.getLists((lists) => {
        if (this._isMounted){
          this.setState({ lists, user }, () => {
            this.setState({ loading: false });
          });
        }
      });
      if (this._isMounted){
        this.setState({ user });
      }
    });
  }

componentWillUnmount() {
    this._isMounted = false;
    firebase.detach();
  }

will give this a try. if it doesnt come since it comes back whenever it feels like. i will accept this answer. — iLightFPS, Oct 23 '20 at 10:14

Can't get rid of: Warning: Can't perform a React state update on an unmounted component

1 Answers1