{
  "id": "react/invalid-hook-call-inside-callback",
  "signature": "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.",
  "signature_zh": "错误：无效的 Hook 调用。Hook 只能在函数组件的主体中调用。可能的原因：1. React 和渲染器（如 React DOM）版本不匹配；2. 违反了 Hook 规则；3. 同一个应用中有多个 React 副本。",
  "regex": "Invalid hook call. Hooks can only be called inside of the body of a function component",
  "domain": "react",
  "category": "runtime_error",
  "subcategory": null,
  "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.",
  "root_cause_type": "generic",
  "root_cause_zh": "Hook 在函数组件的顶层之外被调用，例如在回调中、条件性地或在类组件中。也可能因捆绑了多个 React 副本而出现。",
  "versions": [
    {
      "version": "React 16.8+",
      "introduced": null,
      "deprecated": null,
      "removed": null,
      "behavior_change": null,
      "status": "active"
    },
    {
      "version": "React 17.x",
      "introduced": null,
      "deprecated": null,
      "removed": null,
      "behavior_change": null,
      "status": "active"
    },
    {
      "version": "React 18.x",
      "introduced": null,
      "deprecated": null,
      "removed": null,
      "behavior_change": null,
      "status": "active"
    }
  ],
  "os_specific": {},
  "dead_ends": [
    {
      "action": "",
      "why_fails": "Hooks must be called synchronously during render; async callbacks break the rules of hooks.",
      "fail_rate": 0.95,
      "condition": "",
      "sources": []
    },
    {
      "action": "",
      "why_fails": "Hooks must be called unconditionally at the top level; conditional calls change the call order between renders.",
      "fail_rate": 0.9,
      "condition": "",
      "sources": []
    },
    {
      "action": "",
      "why_fails": "Multiple React copies cause the hook reference to mismatch between packages.",
      "fail_rate": 0.8,
      "condition": "",
      "sources": []
    }
  ],
  "workarounds": [
    {
      "action": "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 }",
      "success_rate": 0.95,
      "how": "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 }",
      "condition": "",
      "sources": []
    },
    {
      "action": "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.",
      "success_rate": 0.9,
      "how": "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.",
      "condition": "",
      "sources": []
    },
    {
      "action": "If using a class component, refactor to a function component with hooks, or keep using class lifecycle methods instead of hooks.",
      "success_rate": 0.85,
      "how": "If using a class component, refactor to a function component with hooks, or keep using class lifecycle methods instead of hooks.",
      "condition": "",
      "sources": []
    }
  ],
  "workarounds_zh": [
    "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 }",
    "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.",
    "If using a class component, refactor to a function component with hooks, or keep using class lifecycle methods instead of hooks."
  ],
  "transition_graph": {
    "leads_to": [],
    "preceded_by": [],
    "frequently_confused_with": []
  },
  "official_doc_url": "https://reactjs.org/warnings/invalid-hook-call-warning.html",
  "official_doc_section": null,
  "error_code": null,
  "verification_tier": "ai_generated",
  "confidence": 0.9,
  "fix_success_rate": 0.93,
  "resolvable": "true",
  "first_seen": "2023-01-10",
  "last_confirmed": "2024-06-01",
  "last_updated": "2024-06-01",
  "evidence_count": 1,
  "tags": [],
  "locale": "en",
  "aliases": []
}