react hook_error ai_generated true

Rendered more hooks than during the previous render

ID: react/rendered-more-hooks

Also available as: JSON · Markdown
90%Fix Rate
90%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. 95% success Hooks must be called in the same order every render — move conditionals INSIDE hooks, not around them 
    // Bad: if (cond) { useState(...) }
// Good: const [val] = useState(cond ? x : y)

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

  2. 88% success If a component conditionally needs a hook, split into two components 
    // Split:
function Wrapper({ showEditor }) {
  if (!showEditor) return <Preview />;
  return <Editor />;  // Editor uses its own hooks internally
}
function Editor() {
  const [text, setText] = useState('');  // Hook always called
}

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

  3. 90% success Check for early returns before hooks — all hooks must run before any return 
    Check for early returns before hooks — all hooks must run before any return

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

Dead Ends

Common approaches that don't work:

  1. Move the conditional inside the hook 55% fail

    Some hooks don't support conditional logic internally

  2. Use useRef to track which hooks to skip 75% fail

    Over-engineering — just follow Rules of Hooks

Error Chain

Frequently confused with: