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

If you have been working with React for a while, you might have encountered the error message “Can’t perform a React state update on an unmounted component”. This error usually occurs when you are trying to update the state of a component that has already been unmounted.

The most common scenario where this error occurs is when you are using the useEffect hook. The useEffect hook is used to perform side effects in functional components. However, if you are not careful, it can lead to the error mentioned above.

So, how can you fix this issue? There are a few solutions that you can try:

Solution 1: Cleanup Function

One way to solve this problem is by using a cleanup function in your useEffect hook. The cleanup function is called when the component is unmounted, and it can be used to cancel any ongoing asynchronous tasks or subscriptions.

  import React, { useEffect, useState } from 'react';
  
  function MyComponent() {
    const [data, setData] = useState(null);
  
    useEffect(() => {
      let isMounted = true;
  
      fetchData().then(response => {
        if (isMounted) {
          setData(response);
        }
      });
  
      return () => {
        isMounted = false;
      };
    }, []);
  
    return (
      

        {data && {data}
}
      
    );
  }
  

In the above example, we have declared a variable called isMounted and set it to true initially. Inside the useEffect hook, we check if isMounted is still true before updating the state using the setData function. Finally, in the cleanup function, we set isMounted to false when the component is unmounted.

Solution 2: Dependency Array

Another solution to this problem is by using a dependency array in your useEffect hook. The dependency array specifies the values that the effect depends on, and if any of those values change, the effect is re-run.

  import React, { useEffect, useState } from 'react';
  
  function MyComponent() {
    const [data, setData] = useState(null);
  
    useEffect(() => {
      fetchData().then(response => {
        setData(response);
      });
    }, []);
  
    return (
      

        {data && {data}
}
      
    );
  }
  

In this example, we have passed an empty array [] as the dependency array to the useEffect hook. This means that the effect will only run once, when the component mounts. Since the effect does not depend on any values, there is no need to check if the component is still mounted before updating the state.

Both of these solutions should help you avoid the “Can’t perform a React state update on an unmounted component” error. However, it is important to choose the solution that best fits your specific use case.

Remember to always handle the cleanup of any ongoing asynchronous tasks or subscriptions to prevent memory leaks and unnecessary updates.

Happy coding!