Updating state after component unmounts – Can’t perform a React state update on an unmounted component

When you try to update the state of a React component after it has unmounted, you’ll encounter the error:

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

This happens because React is trying to update the state of a component that is no longer part of the UI. This can lead to memory leaks, unpredictable behavior, or warnings, especially if you’re dealing with asynchronous operations such as fetching data, setTimeouts, or event listeners.

Common Scenario: Asynchronous Operations After Unmounting

A common case where this occurs is when you make an asynchronous request (e.g., fetch or axios), and the component unmounts before the request completes. Once the request completes, React attempts to update the component state, but since the component is no longer mounted, React throws the error.

Example of the Problem:

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

function DataFetcher() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data)); // This will fail if the component unmounts before fetching completes
  }, []);

  return (
    <div>
      <h2>Data:</h2>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

export default DataFetcher;

Issue:

• Asynchronous fetch: If the component unmounts before the fetch request finishes, React will attempt to update the state (setData(data)) of the unmounted component, causing the error.

---

Solution: Cancel or Ignore State Updates After Unmounting

To prevent this issue, you need to cancel the state update if the component unmounts before the asynchronous operation completes. One common pattern is to use a flag or a cleanup function inside the useEffect hook to track the component’s mounted status.

Corrected Example: Canceling State Update After Unmounting

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

function DataFetcher() {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    // Create a flag to check if the component is still mounted
    let isMounted = true;

    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        if (isMounted) {
          setData(data); // Update state only if the component is still mounted
          setIsLoading(false);
        }
      });

    // Cleanup function to set the flag to false when the component unmounts
    return () => {
      isMounted = false;
    };
  }, []);

  return (
    <div>
      {isLoading ? <p>Loading...</p> : <pre>{JSON.stringify(data, null, 2)}</pre>}
    </div>
  );
}

export default DataFetcher;

Explanation:

1. isMounted Flag: We introduce an isMounted flag that is initially true. This flag ensures that the state is updated only if the component is still mounted.
2. Cleanup Function: The cleanup function (return () => { isMounted = false; }) ensures that when the component unmounts, the flag is set to false. This prevents any state updates after the component is removed from the DOM.
3. Condition Check: Before updating the state with setData(), we check if the component is still mounted (if (isMounted)).

---

Alternative: Using useRef to Track Mount Status

You can also use a useRef hook to track whether the component is mounted or not. This approach avoids the potential issue of using flags inside closures.

Example with useRef:

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

function DataFetcher() {
  const [data, setData] = useState(null);
  const isMounted = useRef(true); // Initialize the ref

  useEffect(() => {
    // Set isMounted to false when the component unmounts
    return () => {
      isMounted.current = false;
    };
  }, []);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        if (isMounted.current) {
          setData(data); // Update state only if the component is still mounted
        }
      });
  }, []);

  return (
    <div>
      <h2>Data:</h2>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

export default DataFetcher;

Explanation:

1. useRef: useRef is used to track the mounted status of the component. Unlike useState, useRef persists its value across re-renders without causing a re-render itself.
2. Ref Cleanup: The cleanup function inside useEffect sets isMounted.current = false when the component unmounts.
3. State Update Condition: Before calling setData(), we check if (isMounted.current) to ensure the component is still mounted before updating the state.

---

---