Can’t perform a React state update on an unmounted component

Can’t perform a React state update on an unmounted component error in React

by

The “Can’t perform a React state update on an unmounted component” error is a runtime error that is shown in your browser’s console. When this error occurs, your code editor might display the following error message 👇

Why this error occurs ?

The error “Can’t perform a React state update on an unmounted component” occurs when you try to update the state of a component that no longer exists. This usually happens when you trigger an asynchronous operation, like an API call or a timeout, and the component is removed or destroyed before the operation finishes.

Here’s a simple example that describe the error :

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

const ExampleComponent = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const timer = setTimeout(() => {
      setCount(count + 1);
    }, 1000);

    return () => {
      clearTimeout(timer);
    };
  }, []);

  if (count >= 3) {
    return null; // Simulating unmounting the component after 3 seconds
  }

  return <div>{count}</div>;
};

export default ExampleComponent;

In this example, we have a functional component ExampleComponent that starts with a “count” of 0. It uses “setTimeout” inside the useEffect hook to update the “count” every second. After the “count” reaches 3, the component is unmounted by returning null.

However, if you run this example, you will encounter the “Can’t perform a React state update on an unmounted component” error. This error occurs because the component is removed from the DOM (unmounted) after the setTimeout function is triggered but before it finishes. When the timer fires and tries to update the component’s state, it fails because the component no longer exists, leading to the error message.

How to fix this error ?

To resolve this error, you can add a flag or variable to keep track of whether the component is currently mounted or not. This way, before updating the state, you can check if the component is still mounted to avoid the error.

Here’s an updated version of the example that handles the error:

//  import React, { useEffect, useState } from 'react';

//  const ExampleComponent = () => {
//  const [count, setCount] = useState(0);
   const [isMounted, setIsMounted] = useState(true);

//  useEffect(() => {
//    const timer = setTimeout(() => {
      if (isMounted) {
        setCount((prevCount) => prevCount + 1);
      }
//    }, 1000);

 //  return () => {
     setIsMounted(false);
 //     clearTimeout(timer);
 //   };
   }, [isMounted]);

//  if (count >= 3) {
//    return null; // Simulating unmounting the component after 3 seconds
//  }

// return <div>{count}</div>;
// };

//export default ExampleComponent;

In this updated code, we introduced a new state variable “isMounted” to track the mounted status of the component. When the component is unmounted, we set “isMounted” to false in the cleanup function returned by the useEffect hook. Inside the “setTimeout” callback, we check the “isMounted” variable before updating the state with “setCount“.

By implementing this fix, the error will be avoided because the state update is only performed when the component is still mounted.

Leave a Comment