{
  "id": "react/typeerror-cannot-read-properties-of-null-reading-usestate",
  "signature": "TypeError: Cannot read properties of null (reading 'useState')",
  "signature_zh": "TypeError: 无法读取 null 的属性 'useState'",
  "regex": "TypeError: Cannot read properties of null \\(reading 'useState'\\)",
  "domain": "react",
  "category": "runtime_error",
  "subcategory": null,
  "root_cause": "React's useState hook is being called from a null context, typically because the component using hooks is not a valid React function component or the hooks are being called outside of a component's render cycle.",
  "root_cause_type": "generic",
  "root_cause_zh": "React 的 useState 钩子是在 null 上下文中被调用的，通常是因为使用钩子的组件不是有效的 React 函数组件，或者钩子在组件的渲染周期之外被调用。",
  "versions": [
    {
      "version": "React 18.2.0",
      "introduced": null,
      "deprecated": null,
      "removed": null,
      "behavior_change": null,
      "status": "active"
    },
    {
      "version": "React 18.3.0-canary",
      "introduced": null,
      "deprecated": null,
      "removed": null,
      "behavior_change": null,
      "status": "active"
    },
    {
      "version": "React 19.0.0-rc",
      "introduced": null,
      "deprecated": null,
      "removed": null,
      "behavior_change": null,
      "status": "active"
    }
  ],
  "os_specific": {},
  "dead_ends": [
    {
      "action": "Wrap the entire component in a React.StrictMode component",
      "why_fails": "StrictMode only highlights potential issues; it doesn't fix the root cause of hooks being called outside a component.",
      "fail_rate": 0.95,
      "condition": "",
      "sources": []
    },
    {
      "action": "Add a constructor in a function component to initialize state",
      "why_fails": "Function components do not support constructors; this will cause a syntax error or undefined behavior.",
      "fail_rate": 1.0,
      "condition": "",
      "sources": []
    },
    {
      "action": "Use class component syntax without converting fully",
      "why_fails": "Mixing class and function component patterns leads to hooks being called in invalid contexts, exacerbating the error.",
      "fail_rate": 0.9,
      "condition": "",
      "sources": []
    }
  ],
  "workarounds": [
    {
      "action": "Ensure the component is a valid React function component that returns JSX and does not call hooks conditionally or inside loops. Example: function MyComponent() { const [state, setState] = useState(initialValue); return <div>{state}</div>; }",
      "success_rate": 0.85,
      "how": "Ensure the component is a valid React function component that returns JSX and does not call hooks conditionally or inside loops. Example: function MyComponent() { const [state, setState] = useState(initialValue); return <div>{state}</div>; }",
      "condition": "",
      "sources": []
    },
    {
      "action": "Move all hook calls to the top level of the component body, never inside callbacks or after early returns. Use a linter like eslint-plugin-react-hooks to catch violations: npx eslint --fix src/",
      "success_rate": 0.9,
      "how": "Move all hook calls to the top level of the component body, never inside callbacks or after early returns. Use a linter like eslint-plugin-react-hooks to catch violations: npx eslint --fix src/",
      "condition": "",
      "sources": []
    },
    {
      "action": "If using custom hooks, verify they are invoked inside a function component and not in a utility function or event handler. Wrap the call in a component if needed.",
      "success_rate": 0.8,
      "how": "If using custom hooks, verify they are invoked inside a function component and not in a utility function or event handler. Wrap the call in a component if needed.",
      "condition": "",
      "sources": []
    }
  ],
  "workarounds_zh": [
    "Ensure the component is a valid React function component that returns JSX and does not call hooks conditionally or inside loops. Example: function MyComponent() { const [state, setState] = useState(initialValue); return <div>{state}</div>; }",
    "Move all hook calls to the top level of the component body, never inside callbacks or after early returns. Use a linter like eslint-plugin-react-hooks to catch violations: npx eslint --fix src/",
    "If using custom hooks, verify they are invoked inside a function component and not in a utility function or event handler. Wrap the call in a component if needed."
  ],
  "transition_graph": {
    "leads_to": [],
    "preceded_by": [],
    "frequently_confused_with": []
  },
  "official_doc_url": "https://react.dev/reference/react/useState",
  "official_doc_section": null,
  "error_code": null,
  "verification_tier": "ai_generated",
  "confidence": 0.85,
  "fix_success_rate": 0.88,
  "resolvable": "true",
  "first_seen": "2024-03-15",
  "last_confirmed": "2024-06-01",
  "last_updated": "2024-06-01",
  "evidence_count": 1,
  "tags": [],
  "locale": "en",
  "aliases": []
}