{
  "id": "react/ref-callback-null-on-unmount",
  "signature": "TypeError: Cannot read properties of null (reading 'focus') when using ref callback",
  "signature_zh": "类型错误：无法读取 null 的属性（读取 'focus'）当使用 ref 回调时",
  "regex": "TypeError: Cannot read properties of null \\(reading '([a-zA-Z_$][a-zA-Z0-9_$]*)'\\)",
  "domain": "react",
  "category": "runtime_error",
  "subcategory": null,
  "root_cause": "A ref callback receives null when the component unmounts, and code attempts to access properties or methods on the ref without checking for null.",
  "root_cause_type": "generic",
  "root_cause_zh": "当组件卸载时，ref 回调接收 null，而代码在未检查 null 的情况下尝试访问 ref 的属性或方法。",
  "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"
    }
  ],
  "os_specific": {},
  "dead_ends": [
    {
      "action": "",
      "why_fails": "useRef still holds a reference to the DOM node but can become stale; accessing .current after unmount may still be null or cause memory leaks.",
      "fail_rate": 0.5,
      "condition": "",
      "sources": []
    },
    {
      "action": "",
      "why_fails": "setTimeout doesn't guarantee the component is still mounted; if unmount occurs during the delay, ref.current is null.",
      "fail_rate": 0.8,
      "condition": "",
      "sources": []
    }
  ],
  "workarounds": [
    {
      "action": "Add a null check before accessing properties on the ref. Use optional chaining or a guard clause.",
      "success_rate": 0.95,
      "how": "Add a null check before accessing properties on the ref. Use optional chaining or a guard clause.",
      "condition": "",
      "sources": []
    },
    {
      "action": "Use a ref callback with cleanup to handle the null case gracefully, especially when using third-party libraries.",
      "success_rate": 0.9,
      "how": "Use a ref callback with cleanup to handle the null case gracefully, especially when using third-party libraries.",
      "condition": "",
      "sources": []
    }
  ],
  "workarounds_zh": [
    "Add a null check before accessing properties on the ref. Use optional chaining or a guard clause.",
    "Use a ref callback with cleanup to handle the null case gracefully, especially when using third-party libraries."
  ],
  "transition_graph": {
    "leads_to": [],
    "preceded_by": [],
    "frequently_confused_with": []
  },
  "official_doc_url": "https://react.dev/reference/react/useRef#ref-callback",
  "official_doc_section": null,
  "error_code": null,
  "verification_tier": "ai_generated",
  "confidence": 0.85,
  "fix_success_rate": 0.9,
  "resolvable": "true",
  "first_seen": "2023-09-05",
  "last_confirmed": "2024-06-01",
  "last_updated": "2024-06-01",
  "evidence_count": 1,
  "tags": [],
  "locale": "en",
  "aliases": []
}