react lifecycle_error ai_generated true

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

ID: react/react-cannot-update-unmounted

Also available as: JSON · Markdown
89%Fix Rate
92%Confidence
220Evidence
2020-06-01First Seen

Version Compatibility

VersionStatusIntroducedDeprecatedNotes
18 active — — —

Root Cause

Async operation (fetch, timer, subscription) completes after component unmounts and tries to call setState. Warning removed in React 18.3+ but the memory leak remains.

generic

Workarounds

  1. 93% success Use AbortController in useEffect cleanup to cancel fetch requests on unmount 
    useEffect(() => { const controller = new AbortController(); fetch(url, { signal: controller.signal }).then(...); return () => controller.abort(); }, [url]);

    Sources: https://react.dev/reference/react/useEffect#fetching-data-with-effects

  2. 91% success Clear timers and unsubscribe in the useEffect cleanup function 
    useEffect(() => { const id = setInterval(fn, 1000); return () => clearInterval(id); }, []);

    Sources: https://react.dev/learn/synchronizing-with-effects#how-to-handle-the-effect-firing-twice-in-development

Dead Ends

Common approaches that don't work:

  1. Use an isMounted ref flag to guard setState calls 55% fail

    This is an anti-pattern that masks the real issue; the async operation still runs and wastes resources. React docs explicitly discourage this.

  2. Ignore the warning since React 18.3+ removed it 70% fail

    The warning is gone but the underlying memory leak and wasted network requests remain

Error Chain

Leads to:
Preceded by:
Frequently confused with: