{
  "id": "react/ref-object-null-on-mount",
  "signature": "TypeError: Cannot read properties of null (reading 'focus')",
  "signature_zh": "TypeError：无法读取 null 的属性（读取 'focus'）",
  "regex": "TypeError: Cannot read properties of null \\(reading '[a-zA-Z]+'\\)",
  "domain": "react",
  "category": "runtime_error",
  "subcategory": null,
  "root_cause": "A ref object is null when accessed because the component has not mounted yet or the ref is incorrectly attached to a stateless component.",
  "root_cause_type": "generic",
  "root_cause_zh": "访问 ref 对象时其为 null，因为组件尚未挂载或 ref 错误地附加到了无状态组件。",
  "versions": [
    {
      "version": "React 18.2.0",
      "introduced": null,
      "deprecated": null,
      "removed": null,
      "behavior_change": null,
      "status": "active"
    },
    {
      "version": "React 19.0.0-rc.2",
      "introduced": null,
      "deprecated": null,
      "removed": null,
      "behavior_change": null,
      "status": "active"
    }
  ],
  "os_specific": {},
  "dead_ends": [
    {
      "action": "",
      "why_fails": "The ref is not attached until after the component mounts, so it is null initially.",
      "fail_rate": 0.9,
      "condition": "",
      "sources": []
    },
    {
      "action": "",
      "why_fails": "This creates a dummy element that is not connected to the DOM, so methods like focus() may not work as expected.",
      "fail_rate": 0.7,
      "condition": "",
      "sources": []
    },
    {
      "action": "",
      "why_fails": "Function components cannot receive refs directly; they must be wrapped in forwardRef.",
      "fail_rate": 0.8,
      "condition": "",
      "sources": []
    }
  ],
  "workarounds": [
    {
      "action": "Access the ref inside a useEffect hook with an empty dependency array to ensure the component is mounted: useEffect(() => { if (ref.current) { ref.current.focus(); } }, []);",
      "success_rate": 0.95,
      "how": "Access the ref inside a useEffect hook with an empty dependency array to ensure the component is mounted: useEffect(() => { if (ref.current) { ref.current.focus(); } }, []);",
      "condition": "",
      "sources": []
    },
    {
      "action": "Use a callback ref to handle the ref assignment: const inputRef = useCallback(node => { if (node) { node.focus(); } }, []); <input ref={inputRef} />",
      "success_rate": 0.9,
      "how": "Use a callback ref to handle the ref assignment: const inputRef = useCallback(node => { if (node) { node.focus(); } }, []); <input ref={inputRef} />",
      "condition": "",
      "sources": []
    },
    {
      "action": "If using a function component, wrap it with React.forwardRef and pass the ref to a DOM element inside: const MyComponent = React.forwardRef((props, ref) => <input ref={ref} />);",
      "success_rate": 0.95,
      "how": "If using a function component, wrap it with React.forwardRef and pass the ref to a DOM element inside: const MyComponent = React.forwardRef((props, ref) => <input ref={ref} />);",
      "condition": "",
      "sources": []
    }
  ],
  "workarounds_zh": [
    "Access the ref inside a useEffect hook with an empty dependency array to ensure the component is mounted: useEffect(() => { if (ref.current) { ref.current.focus(); } }, []);",
    "Use a callback ref to handle the ref assignment: const inputRef = useCallback(node => { if (node) { node.focus(); } }, []); <input ref={inputRef} />",
    "If using a function component, wrap it with React.forwardRef and pass the ref to a DOM element inside: const MyComponent = React.forwardRef((props, ref) => <input ref={ref} />);"
  ],
  "transition_graph": {
    "leads_to": [],
    "preceded_by": [],
    "frequently_confused_with": []
  },
  "official_doc_url": "https://react.dev/reference/react/useRef",
  "official_doc_section": null,
  "error_code": null,
  "verification_tier": "ai_generated",
  "confidence": 0.85,
  "fix_success_rate": 0.9,
  "resolvable": "true",
  "first_seen": "2023-05-18",
  "last_confirmed": "2024-06-01",
  "last_updated": "2024-06-01",
  "evidence_count": 1,
  "tags": [],
  "locale": "en",
  "aliases": []
}