{
  "id": "react/ref-object-not-initialized",
  "signature": "TypeError: Cannot read properties of null (reading 'current')",
  "signature_zh": "类型错误：无法读取 null 的属性（读取 'current'）",
  "regex": "Cannot read properties of null \\(reading 'current'\\)",
  "domain": "react",
  "category": "runtime_error",
  "subcategory": null,
  "root_cause": "Attempting to access .current on a ref that is null, often because useRef() was called with no initial value or the ref was not properly attached to a DOM element.",
  "root_cause_type": "generic",
  "root_cause_zh": "尝试访问 null 的 ref 上的 .current 属性，通常是因为 useRef() 调用时没有初始值，或者 ref 未正确附加到 DOM 元素。",
  "versions": [
    {
      "version": "React 16.8+",
      "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 18.2.0",
      "introduced": null,
      "deprecated": null,
      "removed": null,
      "behavior_change": null,
      "status": "active"
    }
  ],
  "os_specific": {},
  "dead_ends": [
    {
      "action": "Setting useRef(null) explicitly",
      "why_fails": "If the ref is not attached to a DOM element, it remains null. The fix is to attach it, not to change the initial value.",
      "fail_rate": 0.4,
      "condition": "",
      "sources": []
    },
    {
      "action": "Using useEffect to check if ref.current exists",
      "why_fails": "A null check only masks the error; the underlying issue (ref not attached) persists.",
      "fail_rate": 0.5,
      "condition": "",
      "sources": []
    },
    {
      "action": "Using createRef() instead of useRef()",
      "why_fails": "createRef() returns { current: null } in function components and will not persist across renders; it's for class components.",
      "fail_rate": 0.6,
      "condition": "",
      "sources": []
    }
  ],
  "workarounds": [
    {
      "action": "Ensure the ref is attached to a DOM element: const myRef = useRef(null); return <div ref={myRef}>...</div>. Then access myRef.current only after the component mounts, e.g., inside useEffect or an event handler.",
      "success_rate": 0.9,
      "how": "Ensure the ref is attached to a DOM element: const myRef = useRef(null); return <div ref={myRef}>...</div>. Then access myRef.current only after the component mounts, e.g., inside useEffect or an event handler.",
      "condition": "",
      "sources": []
    },
    {
      "action": "If using forwardRef, make sure the child component forwards the ref to a DOM element: const Child = forwardRef((props, ref) => <input ref={ref} />);",
      "success_rate": 0.85,
      "how": "If using forwardRef, make sure the child component forwards the ref to a DOM element: const Child = forwardRef((props, ref) => <input ref={ref} />);",
      "condition": "",
      "sources": []
    }
  ],
  "workarounds_zh": [
    "Ensure the ref is attached to a DOM element: const myRef = useRef(null); return <div ref={myRef}>...</div>. Then access myRef.current only after the component mounts, e.g., inside useEffect or an event handler.",
    "If using forwardRef, make sure the child component forwards the ref to a DOM element: const Child = forwardRef((props, ref) => <input ref={ref} />);"
  ],
  "transition_graph": {
    "leads_to": [],
    "preceded_by": [],
    "frequently_confused_with": []
  },
  "official_doc_url": "https://reactjs.org/docs/hooks-reference.html#useref",
  "official_doc_section": null,
  "error_code": null,
  "verification_tier": "ai_generated",
  "confidence": 0.83,
  "fix_success_rate": 0.87,
  "resolvable": "true",
  "first_seen": "2023-05-12",
  "last_confirmed": "2024-06-01",
  "last_updated": "2024-06-01",
  "evidence_count": 1,
  "tags": [],
  "locale": "en",
  "aliases": []
}