Two most common errors in ReactJS and how to resolve them

Hello everyone!

While coding with ReactJs you can face countless errors and warnings but this two occurs most frequently.

Error 1.

Can't perform a React state update on an unmounted component solution

The complete error code looks like this:

cant-perform-a-react-state-update-on-an-unmounted-component.PNG

As you can see from the error message above, the error causes a memory leak in your app and somehow causes your app to re-render multiple times.

To fix this error, you have to cancel all subscriptions and asynchronous task in useEffect hook and/or componentDidMount lifecycle method.

Solution for the error in useEffect() hook.

You can declare let isMounted = true inside useEffect, which will be changed in the cleanup callback, as soon as the component is unmounted. Before state updates, you now check this variable conditionally:

useEffect(() => {
  let isMounted = true; // note this flag denote mount status
  someAsyncOperation().then(data => {
    if (isMounted) setState(data);
  })
  return () => { isMounted = false }; // use effect cleanup to set flag false, if unmounted
});

Or

useEffect(() => {
  let isMounted = true; 

    const someFunction = async() => {
        await someOperations
    }
  return () => { isMounted = false }; 
});

PS: This solution was originally provided by Ford04 on this thread on Stackoverflow

Solution for the error in React componentDidMount and componentWillUnmount lifecycle methods

class Home extends Component {
  _isMounted = false;

  constructor(props) {
    super(props);

    this.state = {
      news: [],
    };
  }

  componentDidMount() {
    this._isMounted = true;

    ajaxVar
      .get('https://domain')
      .then(result => {
        if (this._isMounted) {
          this.setState({
            news: result.data.hits,
          });
        }
      });
  }

  componentWillUnmount() {
    this._isMounted = false;
  }

  render() {
    ...
  }
}

PS: This solution was originally provided by Vinod on this thread on Stackoverflow

Error 2.

Can't find variable of Alert (or other variable name)

The complete error code looks like this:

cant-find-variable-variableName-example.PNG

This error comes up when you forget to import a variable, a module, a function or a class.

Solution for the error

  • Check to see if you have imported all the variables you need in your app.
  • Check to see if you have created the class or function that you are referencing.
  • Check if you have misspelled a particular import.

If you read to this part, it means that you found this article useful. Kindly leave a feedback and follow me to stay updated on tips like this.

Thank you

#2Articles1Week

No Comments Yet