react render_error ai_generated true

Error: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect without dependencies.

ID: react/maximum-update-depth

Also available as: JSON · Markdown
92%Fix Rate
92%Confidence
50Evidence
2023-01-01First Seen

Version Compatibility

VersionStatusIntroducedDeprecatedNotes
18 active — — —

Root Cause

Infinite re-render loop. setState triggers re-render which triggers setState again.

generic

Workarounds

  1. 95% success Add proper dependency array to useEffect — don't include the state you're setting 
    useEffect(() => { setState(val); }, [dep]); // not [dep, state]

    Sources: https://react.dev/reference/react/useEffect

  2. 90% success Move state calculation into the render (useMemo) instead of useEffect + setState 
    // Instead of useEffect + setState:
const derived = useMemo(() => compute(props), [props]);
// No setState needed, no render loop possible

    Sources: https://react.dev/reference/react/useMemo

  3. 88% success Check onClick handlers: onClick={handleClick} not onClick={handleClick()} 
    onClick={handleClick} not onClick={handleClick()}

    Sources: https://react.dev/learn/responding-to-events

Dead Ends

Common approaches that don't work:

  1. Add more state variables to break the loop 80% fail

    More state = more potential for loops

  2. Use useRef to track if already updated 65% fail

    Hack that hides the real issue — broken effect deps

Error Chain

Frequently confused with: