{
  "id": "react/error-invalid-call-of-useeffect-in-callback",
  "signature": "Error: Invalid hook call. Hooks can only be called inside 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": "错误: 无效的钩子调用。钩子只能在函数组件的主体内部调用。可能的原因：1. React 和渲染器（如 React DOM）版本不匹配；2. 违反了钩子规则；3. 同一个应用中有多个 React 副本。",
  "regex": "Error: Invalid hook call\\. Hooks can only be called inside the body of a function component\\.",
  "domain": "react",
  "category": "runtime_error",
  "subcategory": null,
  "root_cause": "A hook (e.g., useEffect, useState) is being called inside a regular JavaScript function, callback, or class component, violating the Rules of Hooks that require hooks to be called at the top level of a React function component.",
  "root_cause_type": "generic",
  "root_cause_zh": "钩子（例如 useEffect、useState）在普通 JavaScript 函数、回调或类组件中被调用，违反了钩子规则，要求钩子必须在 React 函数组件的顶层调用。",
  "versions": [
    {
      "version": "React 18.2.0",
      "introduced": null,
      "deprecated": null,
      "removed": null,
      "behavior_change": null,
      "status": "active"
    },
    {
      "version": "React 17.0.2",
      "introduced": null,
      "deprecated": null,
      "removed": null,
      "behavior_change": null,
      "status": "active"
    },
    {
      "version": "React 16.14.0",
      "introduced": null,
      "deprecated": null,
      "removed": null,
      "behavior_change": null,
      "status": "active"
    }
  ],
  "os_specific": {},
  "dead_ends": [
    {
      "action": "Move the hook call to the top of a class component's render method",
      "why_fails": "Hooks are not supported in class components; they must be used in function components.",
      "fail_rate": 1.0,
      "condition": "",
      "sources": []
    },
    {
      "action": "Wrap the hook call in a try-catch block",
      "why_fails": "The error is thrown as an invariant, not a catchable exception, and try-catch doesn't prevent the violation.",
      "fail_rate": 0.95,
      "condition": "",
      "sources": []
    },
    {
      "action": "Use React.forwardRef to pass hooks to child components",
      "why_fails": "forwardRef doesn't change where hooks can be called; hooks still must be in the component body.",
      "fail_rate": 0.9,
      "condition": "",
      "sources": []
    }
  ],
  "workarounds": [
    {
      "action": "Ensure all hook calls are at the top level of a function component, never inside loops, conditions, or nested functions. Example: function MyComponent() { useEffect(() => { /* ... */ }, []); return <div />; }",
      "success_rate": 0.9,
      "how": "Ensure all hook calls are at the top level of a function component, never inside loops, conditions, or nested functions. Example: function MyComponent() { useEffect(() => { /* ... */ }, []); return <div />; }",
      "condition": "",
      "sources": []
    },
    {
      "action": "Check for duplicate React instances in your bundle by running `npm ls react` and ensure only one version exists. If using webpack, add `resolve: { alias: { react: require.resolve('react') } }` to webpack config.",
      "success_rate": 0.85,
      "how": "Check for duplicate React instances in your bundle by running `npm ls react` and ensure only one version exists. If using webpack, add `resolve: { alias: { react: require.resolve('react') } }` to webpack config.",
      "condition": "",
      "sources": []
    },
    {
      "action": "Convert class components to function components if you need to use hooks. Example: class MyComp extends Component { render() { return <div />; } } becomes function MyComp() { return <div />; }",
      "success_rate": 0.95,
      "how": "Convert class components to function components if you need to use hooks. Example: class MyComp extends Component { render() { return <div />; } } becomes function MyComp() { return <div />; }",
      "condition": "",
      "sources": []
    }
  ],
  "workarounds_zh": [
    "Ensure all hook calls are at the top level of a function component, never inside loops, conditions, or nested functions. Example: function MyComponent() { useEffect(() => { /* ... */ }, []); return <div />; }",
    "Check for duplicate React instances in your bundle by running `npm ls react` and ensure only one version exists. If using webpack, add `resolve: { alias: { react: require.resolve('react') } }` to webpack config.",
    "Convert class components to function components if you need to use hooks. Example: class MyComp extends Component { render() { return <div />; } } becomes function MyComp() { return <div />; }"
  ],
  "transition_graph": {
    "leads_to": [],
    "preceded_by": [],
    "frequently_confused_with": []
  },
  "official_doc_url": "https://react.dev/warnings/invalid-hook-call-warning",
  "official_doc_section": null,
  "error_code": null,
  "verification_tier": "ai_generated",
  "confidence": 0.88,
  "fix_success_rate": 0.9,
  "resolvable": "true",
  "first_seen": "2024-02-01",
  "last_confirmed": "2024-06-01",
  "last_updated": "2024-06-01",
  "evidence_count": 1,
  "tags": [],
  "locale": "en",
  "aliases": []
}