react runtime_error ai_generated true

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app.

ID: react/invalid-hook-call-inside-callback

Also available as: JSON · Markdown · 中文
93%Fix Rate
90%Confidence
1Evidence
2023-01-10First Seen

Version Compatibility

VersionStatusIntroducedDeprecatedNotes
React 16.8+ active — — —
React 17.x active — — —
React 18.x active — — —

Root Cause

Hooks are called outside the top-level of a function component, e.g., inside a callback, conditionally, or in a class component. Also occurs when multiple React copies are bundled.

generic

中文

Hook 在函数组件的顶层之外被调用，例如在回调中、条件性地或在类组件中。也可能因捆绑了多个 React 副本而出现。

Official Documentation

https://reactjs.org/warnings/invalid-hook-call-warning.html

Workarounds

  1. 95% success Ensure all hooks are called at the top level of a function component, not inside loops, conditions, or nested functions. Example: function MyComponent() { const [state, setState] = useState(0); // correct } 
    Ensure all hooks are called at the top level of a function component, not inside loops, conditions, or nested functions. Example: function MyComponent() { const [state, setState] = useState(0); // correct }
  2. 90% success Check for duplicate React versions by running npm ls react or yarn why react. If duplicates exist, deduplicate with npm dedupe or use resolutions in package.json. 
    Check for duplicate React versions by running npm ls react or yarn why react. If duplicates exist, deduplicate with npm dedupe or use resolutions in package.json.
  3. 85% success If using a class component, refactor to a function component with hooks, or keep using class lifecycle methods instead of hooks. 
    If using a class component, refactor to a function component with hooks, or keep using class lifecycle methods instead of hooks.

中文步骤

  1. Ensure all hooks are called at the top level of a function component, not inside loops, conditions, or nested functions. Example: function MyComponent() { const [state, setState] = useState(0); // correct }
  2. Check for duplicate React versions by running npm ls react or yarn why react. If duplicates exist, deduplicate with npm dedupe or use resolutions in package.json.
  3. If using a class component, refactor to a function component with hooks, or keep using class lifecycle methods instead of hooks.

Dead Ends

Common approaches that don't work:

  1. 95% fail

    Hooks must be called synchronously during render; async callbacks break the rules of hooks.

  2. 90% fail

    Hooks must be called unconditionally at the top level; conditional calls change the call order between renders.

  3. 80% fail

    Multiple React copies cause the hook reference to mismatch between packages.