{
  "id": "react/usecontext-null-focus",
  "signature": "TypeError: Cannot read properties of null (reading 'focus'). This error is located at: in MyComponent (at App.js:15)",
  "signature_zh": "类型错误：无法读取 null 的属性（读取 'focus'）。此错误位于：MyComponent (at App.js:15)",
  "regex": "Cannot read properties of null.*reading.*focus",
  "domain": "react",
  "category": "runtime_error",
  "subcategory": null,
  "root_cause": "A ref is attached to a component or element that is conditionally rendered, and code tries to call ref.current.focus() when the element is not mounted (ref.current is null).",
  "root_cause_type": "generic",
  "root_cause_zh": "ref 附加到条件渲染的组件或元素上，当元素未挂载时（ref.current 为 null），代码尝试调用 ref.current.focus()。",
  "versions": [
    {
      "version": "react@18.2.0",
      "introduced": null,
      "deprecated": null,
      "removed": null,
      "behavior_change": null,
      "status": "active"
    },
    {
      "version": "react-dom@18.2.0",
      "introduced": null,
      "deprecated": null,
      "removed": null,
      "behavior_change": null,
      "status": "active"
    }
  ],
  "os_specific": {},
  "dead_ends": [
    {
      "action": "Using optional chaining (ref.current?.focus()) without understanding why ref is null",
      "why_fails": "Silently fails when the element is not mounted; the focus action never happens, which may be a UX issue.",
      "fail_rate": 0.5,
      "condition": "",
      "sources": []
    },
    {
      "action": "Moving the focus call to useEffect with no dependency array",
      "why_fails": "May run before the element is rendered if the component conditionally renders the element later.",
      "fail_rate": 0.6,
      "condition": "",
      "sources": []
    },
    {
      "action": "Using a callback ref and trying to focus immediately",
      "why_fails": "Callback refs are called during render, but the DOM may not be fully attached yet.",
      "fail_rate": 0.45,
      "condition": "",
      "sources": []
    }
  ],
  "workarounds": [
    {
      "action": "Check if ref.current is not null before calling focus: `if (ref.current) { ref.current.focus(); }`",
      "success_rate": 0.95,
      "how": "Check if ref.current is not null before calling focus: `if (ref.current) { ref.current.focus(); }`",
      "condition": "",
      "sources": []
    },
    {
      "action": "Use useEffect with a dependency on the condition that controls rendering: `useEffect(() => { if (isVisible && ref.current) { ref.current.focus(); } }, [isVisible]);`",
      "success_rate": 0.9,
      "how": "Use useEffect with a dependency on the condition that controls rendering: `useEffect(() => { if (isVisible && ref.current) { ref.current.focus(); } }, [isVisible]);`",
      "condition": "",
      "sources": []
    }
  ],
  "workarounds_zh": [
    "Check if ref.current is not null before calling focus: `if (ref.current) { ref.current.focus(); }`",
    "Use useEffect with a dependency on the condition that controls rendering: `useEffect(() => { if (isVisible && ref.current) { ref.current.focus(); } }, [isVisible]);`"
  ],
  "transition_graph": {
    "leads_to": [],
    "preceded_by": [],
    "frequently_confused_with": []
  },
  "official_doc_url": "https://reactjs.org/docs/refs-and-the-dom.html",
  "official_doc_section": null,
  "error_code": null,
  "verification_tier": "ai_generated",
  "confidence": 0.84,
  "fix_success_rate": 0.88,
  "resolvable": "true",
  "first_seen": "2023-05-12",
  "last_confirmed": "2024-06-01",
  "last_updated": "2024-06-01",
  "evidence_count": 1,
  "tags": [],
  "locale": "en",
  "aliases": []
}