Just like you, I once bumped into the “Can’t perform a react state update on an unmounted component” error. It may seem tricky, but as you grasp the root of the problem, the solution will show up in front of your eyes. Let’s get the party started!

Why Does The “Can’t Perform A React State Update On An Unmounted Component” Error Happen?

The component was unmounted today when data retrieval was initiated, yet the function is attempting to keep updating the unmounted component’s state.

Although such an error is a no-op, this shows that your program has a memory leak. When we wish to change the state of an unmounted component, the warning “Can’t execute a React state update on an unmounted component” may appear.

To repair, simply call a useEffect cleaning method that cancels all subscriptions and asynchronous processes.

“Can’t Perform A React State Update On An Unmounted Component” Error – How To Solve?

Keeping track of whether the component is mounted utilizing an isMounted boolean in our useEffect hook is an easy approach to get rid of the warning.

In useEffect, we set the isMounted boolean value to true.

The state is updated by our fetchData function in response to an async job, most frequently an API request.

Bear in mind, though, that we only alter the state if the isMounted variable is true.

async function fetchData() {

  const result = await Promise.resolve(['hello', 'world']);

  // 👇️ only update state if component is mounted

  if (isMounted) {

    setState(result);

  }

}

Because we aren’t changing the state if the component isn’t mounted, this lets us avoid the warning.

When the component unmounts, the function we returned from the useEffect hook is invoked.

return () => {

  // 👇️ when component unmounts, set isMounted to false

  isMounted = false;

};

To signal that the component is no longer mounted, we set the isMounted variable to false.

The if block won’t execute if our fetchData method is used after the component unmounts since isMounted is set to false.

async function fetchData() {

  const result = await Promise.resolve(['hello', 'world']);

  // 👇️ only update state if component is mounted

  if (isMounted) {

    setState(result);

  }

}

If you do this frequently, you can put the logic inside a hook that you can reuse.

import {useState, useEffect, useRef} from 'react';

// 👇️ extract logic into reusable hook

function useIsMounted() {

  const isMounted = useRef(false);

  useEffect(() => {

    isMounted.current = true;

    return () => {

      isMounted.current = false;

    };

  });

  return isMounted;

}

const App = () => {

  const [state, setState] = useState('');

  // 👇️ use hook

  const isMountedRef = useIsMounted();

  useEffect(() => {

    async function fetchData() {

      const result = await Promise.resolve(['hello', 'world']);

      // 👇️ only update state if component is mounted

      if (isMountedRef.current) {

        setState(result);

      }

    }

    fetchData();

  }, [isMountedRef]);

  return (

    <div>

      <h2>State: {JSON.stringify(state)}</h2>

    </div>

  );

};

export default App;

The Bottom Line

Above is all that you should take into account when it comes to “can’t perform a react state update on an unmounted component” error. Hopefully, this article can be a great help to you!