react render_error ai_generated true

Too many re-renders. React limits the number of renders to prevent an infinite loop.

ID: react/react-bad-setstate-in-render

Also available as: JSON · Markdown
90%Fix Rate
93%Confidence
160Evidence
2022-01-01First Seen

Version Compatibility

VersionStatusIntroducedDeprecatedNotes
18 active — — —

Root Cause

setState called directly in the render body (not inside useEffect or event handler) causes immediate re-render which calls setState again, creating an infinite loop.

generic

Workarounds

  1. 93% success Move the setState call into a useEffect 
    useEffect(() => { setSomeState(computedValue); }, [dependency]);

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

  2. 91% success Derive the value during render instead of using setState 
    Replace useState + setState-in-render with const derivedValue = useMemo(() => compute(props), [props]);

    Sources: https://react.dev/reference/react/useMemo https://react.dev/learn/you-might-not-need-an-effect

Dead Ends

Common approaches that don't work:

  1. Add a condition check around the setState call in the render body 65% fail

    If the condition ever evaluates to true during render, the loop restarts; does not address the root cause of calling setState during render

  2. Use useRef to gate the setState call 60% fail

    Adds complexity without fixing the architecture; ref mutations during render are unpredictable in concurrent mode

Error Chain

Leads to:
Preceded by:
Frequently confused with: