react hook_error ai_generated true

Invalid hook call. Hooks can only be called inside the body of a function component

ID: react/invalid-hook-call

Also available as: JSON · Markdown
85%Fix Rate
88%Confidence
410Evidence
2023-01-01First Seen

Version Compatibility

VersionStatusIntroducedDeprecatedNotes
18 active — — —

Root Cause

Hook called outside a component, in a class component, or with multiple React copies.

generic

Workarounds

  1. 92% success Ensure hooks are called at the top level of a function component 
    // Hooks must be at the top level, not inside conditions:
function MyComponent() {
  const [val, setVal] = useState(0); // Always called
  const data = useMemo(() => compute(val), [val]); // Always called
  if (condition) return <Fallback />; // Conditional return AFTER hooks
}

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

  2. 85% success Check for duplicate React versions in node_modules 
    Check for duplicate React versions in node_modules

    Sources: https://react.dev/warnings/invalid-hook-call-warning

Dead Ends

Common approaches that don't work:

  1. Convert class component to function component just for hooks 55% fail

    If the class has complex lifecycle, conversion may introduce bugs

  2. Call hooks inside event handlers or callbacks 82% fail

    Hooks must be at the top level, not inside conditions or callbacks

Error Chain

Leads to:
Preceded by:
Frequently confused with: