Can't Perform a React State Update on an Unmounted Component

The React Warning “Can't perform a react state update on an unmounted component” is occur when you try to update a state after the component was unmounted. To solve this warning initialized a flag in useEffect with the default value true, and set it to false when the component unmounts. Check this flag before we update the state after an async operation.

How the warning “Can't perform a react state update on an unmounted component” occurs

When you are trying to update a state after the component is unmounted, error: “Can’t perform a react state update on an unmounted component” will occur. For better understanding let us take an example of doing an async operation like an API call. During this async operation, suppose the component got unmounted. When a component unmounts, React will remove the component from the VDOM (Virtual DOM) and from the real DOM as well. After the sync operation, the component is not present and cannot change its state variables. This will lead to show a warning.

How to solve the warning “Can't perform a react state update on an unmounted component”

To solve the issue we can set a flag to determine whether the component was unmounted or not. Here we have initialized isMounted flag in useEffect hook and set it to true by default. And, this flag was checked before we update the state after the async operation. When the component gets unmounted, we changed this flag to false.

Here is the sample code.

import {useState, useEffect} from 'react';

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

  	useEffect(() => {
    	// set isMounted to true
    	let isMounted = true;
	
    	someAsyncOperation().then(data => {
    		if (isMounted) setState(data);    // add conditional check
  		});
		
    	return () => {
      		// when component unmounts, set isMounted to false
      		isMounted = false;
    	};
  	}, []);
	
  	return (
    	<div>
      		<h2>State: {JSON.stringify(state)}</h2>
    	</div>
  	);
};

export default App;

The function returned from the useEffect hook will be executed when the component unmounts. So we set isMounted variable into false in useEffect return function as given below.

return () => {
	// when component unmounts, set isMounted to false
	isMounted = false;
};

Learn how to use the Effects with cleanup in React.

What is unmounting

Unmounting is the process of removing a component from the browser. React removes the DOM node from the browser DOM and the Virtual DOM, along with any child nodes, when a component is unmounted. The componentWillUnmount() method for class-based components or the return of useEffect() hook for functional components can be used to perform an optional cleanup mechanism when a component is unmounted.

Conclusion

To solve the warning “Can't perform a react state update on an unmounted component”, you can initialize a flag in useEffect hook with the default value true, and change its value to false when the component unmounts. You can check this flag value before updating the state after an async operation. To change the value when the component unmounts you can use of return function of useEffect hook.