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

javascript

async-operations

state-updates

memory-leaks

byAnton Shumikhin·Jan 3, 2025

class MyComponent extends React.Component {
  _isMounted = false;

  componentDidMount() { 
    this._isMounted = true; // Hi there, I'm mounted and ready to roll!
  }

  componentWillUnmount() { 
    this._isMounted = false; // Bye world, I am exiting the DOM stage!
  }

  updateStateIfMounted = (newState) => {
    if (this._isMounted) {
      this.setState(newState); // Safe to update, captain!
    }
  }
  
  // Note: Call updateStateIfMounted where you would normally call this.setState
}

To thwart state updates on unmounted components, instigate a _isMounted flag. Assign it as true post component mount and as false once it unmounts. Enshroud this.setState abstraction inside a function (updateStateIfMounted) that investigates this flag. This commits to state updates solely if the component persists within the DOM, evading the warning.

Harnessing useState and useEffect

To conduct async operations securely in functional components, use the useEffect hook to track side effects and return a cleanup function to abort pending operations upon component unmount.

The Power of Cleanup in async operations

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    let didCancel = false; // Looks like I'm good to go for now

    async function fetchData() {
      try {
        const response = await fetch('/api/data');
        if (!didCancel) {
          setData(response.data); // Just updating state, nothing to see here!
        }
      } catch (error) {
        if (!didCancel) {
          console.error(error);
        }
      }
    }

    fetchData();

    return () => {
      didCancel = true; // Abort mission! I repeat, abort mission!
    };
  }, []);

  return ... // Component JSX
}

In this context, didCancel flag, set to true in the cleanup function, negates state updates post component unmount.

useRef tracking component's mount status

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

function MyFunctionComponent() {
  const [data, setData] = useState(null);
  const isMounted = useRef(true); // I existed once upon a time in the virtual DOM kingdom

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch('/api/data');
      if (isMounted.current) {
        setData(response.data); // New data in the house if I'm still around!
      }
    };

    fetchData();

    return () => {
      isMounted.current = false; // Until we meet again in the realm of mounting
    };
  }, []);

  return ... // Component JSX
}

In this scenario, isMounted initializes as true and reconfigures to false upon component unmount, acting as a guarding clause to prevent state alterations.

The might of AbortController in async operations

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    const abortController = new AbortController();
    const { signal } = abortController;

    async function fetchData() {
      try {
        const response = await fetch('/api/data', { signal });
        setData(response.data); // Time to update my state... if I'm still alive!
      } catch (error) {
        if (error.name !== 'AbortError') {
          console.error(error);
        }
      }
    }

    fetchData();

    return () => abortController.abort(); // So long, async operation, the abortController has sealed your fate!
  }, []);

  return ... // Component JSX
}

This instance prevents memory leaks by cancelling the fetch endeavor if the component dismounts while the request is in progress.

Decoding React's lifecycle and patterns

Deciphering React's lifecycle and patterns is indispensable for effective management of state updates and memory leak evasion.

Lifecycle of component's mount and unmount

Knowing when to subscribe and unsubscribe from events or observables is critical to maintain the component's lifecycle and avoid unnecessary computations or memory consumption.

Reflex of React patterns

Embrace custom hooks to encapsulate the lifecycle management and async operations. It provides reusability, reduces code redundancy, and augments code readability.

function useFetch(url) {
  const [data, setData] = useState(null);
  const isMounted = useRef(true); // I lived in the kingdom of DOM

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch(url);
      if (isMounted.current) {
        setData(response.data); // Only if I'm still standing!
      }
    };
    fetchData();

    return () => {
      isMounted.current = false; // So long, DOM kingdom!
    };
  }, [url]);

  return data;
}