react hooks ai_generated true

Error: Rendered more hooks than during the previous render

ID: react/hooks-rules-violation

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

Version Compatibility

VersionStatusIntroducedDeprecatedNotes
18 active — — —

Root Cause

Hooks called conditionally or in different order between renders — violates Rules of Hooks.

generic

Workarounds

  1. 97% success Move all hooks to the top level of the component, before any conditionals or returns 
    Hooks must be called in the same order every render

    Sources: https://react.dev/reference/rules/rules-of-hooks

  2. 93% success Use the eslint-plugin-react-hooks to catch violations at lint time 
    npm install -D eslint-plugin-react-hooks — catches hook order violations automatically

Dead Ends

Common approaches that don't work:

  1. Using useRef to track which hooks to call 80% fail

    Adds complexity; still violates hook ordering rules

  2. Converting to class components to avoid hooks entirely 65% fail

    Loses functional component benefits; class components are less ergonomic

Error Chain

Frequently confused with: