{
  "id": "react/missing-dependency-array-useEffect",
  "signature": "React Hook useEffect has a missing dependency: 'data'. Either include it or remove the dependency array.",
  "signature_zh": "React Hook useEffect 缺少依赖项：'data'。要么包含它，要么移除依赖数组。",
  "regex": "React Hook useEffect has a missing dependency",
  "domain": "react",
  "category": "runtime_error",
  "subcategory": null,
  "root_cause": "The useEffect callback references a variable (e.g., 'data') that is not listed in its dependency array, causing stale closures or missing updates.",
  "root_cause_type": "generic",
  "root_cause_zh": "useEffect 回调引用了变量（例如 'data'），但该变量未列在其依赖数组中，导致闭包过时或更新缺失。",
  "versions": [
    {
      "version": "React 16.8+",
      "introduced": null,
      "deprecated": null,
      "removed": null,
      "behavior_change": null,
      "status": "active"
    },
    {
      "version": "React 17.x",
      "introduced": null,
      "deprecated": null,
      "removed": null,
      "behavior_change": null,
      "status": "active"
    },
    {
      "version": "React 18.x",
      "introduced": null,
      "deprecated": null,
      "removed": null,
      "behavior_change": null,
      "status": "active"
    },
    {
      "version": "ESLint plugin react-hooks v4.x",
      "introduced": null,
      "deprecated": null,
      "removed": null,
      "behavior_change": null,
      "status": "active"
    }
  ],
  "os_specific": {},
  "dead_ends": [
    {
      "action": "Adding // eslint-disable-next-line react-hooks/exhaustive-deps to suppress the warning without fixing the dependency.",
      "why_fails": "Suppressing the warning can lead to stale data in effects, causing bugs that are hard to trace, especially in complex state logic.",
      "fail_rate": 0.8,
      "condition": "",
      "sources": []
    },
    {
      "action": "Removing the dependency array entirely (useEffect(() => { ... })) to run the effect on every render.",
      "why_fails": "This can cause performance issues and infinite loops if the effect triggers state updates, and it may not be the intended behavior.",
      "fail_rate": 0.7,
      "condition": "",
      "sources": []
    },
    {
      "action": "Moving the variable outside the component to make it a constant (if it's not meant to change).",
      "why_fails": "If the variable is supposed to be dynamic (e.g., from props or state), moving it outside defeats the purpose and can cause incorrect behavior.",
      "fail_rate": 0.6,
      "condition": "",
      "sources": []
    }
  ],
  "workarounds": [
    {
      "action": "Add the missing variable to the dependency array. Example: useEffect(() => { console.log(data); }, [data]);",
      "success_rate": 0.9,
      "how": "Add the missing variable to the dependency array. Example: useEffect(() => { console.log(data); }, [data]);",
      "condition": "",
      "sources": []
    },
    {
      "action": "If the variable is a function or object that shouldn't trigger re-runs, wrap it in useCallback or useMemo and include the stable reference. Example: const stableFn = useCallback(() => { ... }, []); useEffect(() => { stableFn(); }, [stableFn]);",
      "success_rate": 0.85,
      "how": "If the variable is a function or object that shouldn't trigger re-runs, wrap it in useCallback or useMemo and include the stable reference. Example: const stableFn = useCallback(() => { ... }, []); useEffect(() => { stableFn(); }, [stableFn]);",
      "condition": "",
      "sources": []
    },
    {
      "action": "If the effect should only run once (on mount), ensure it doesn't reference any external variables, or use refs to access current values without re-running. Example: const dataRef = useRef(data); dataRef.current = data; useEffect(() => { console.log(dataRef.current); }, []);",
      "success_rate": 0.8,
      "how": "If the effect should only run once (on mount), ensure it doesn't reference any external variables, or use refs to access current values without re-running. Example: const dataRef = useRef(data); dataRef.current = data; useEffect(() => { console.log(dataRef.current); }, []);",
      "condition": "",
      "sources": []
    }
  ],
  "workarounds_zh": [
    "将缺少的变量添加到依赖数组中。示例：useEffect(() => { console.log(data); }, [data]);",
    "如果变量是函数或对象，不应触发重新运行，请将其包装在 useCallback 或 useMemo 中，并包含稳定引用。示例：const stableFn = useCallback(() => { ... }, []); useEffect(() => { stableFn(); }, [stableFn]);",
    "如果 effect 应仅运行一次（挂载时），确保它不引用任何外部变量，或使用 refs 访问当前值而不重新运行。示例：const dataRef = useRef(data); dataRef.current = data; useEffect(() => { console.log(dataRef.current); }, []);"
  ],
  "transition_graph": {
    "leads_to": [],
    "preceded_by": [],
    "frequently_confused_with": []
  },
  "official_doc_url": "https://react.dev/reference/react/useEffect#specifying-reactive-dependencies",
  "official_doc_section": null,
  "error_code": null,
  "verification_tier": "ai_generated",
  "confidence": 0.87,
  "fix_success_rate": 0.85,
  "resolvable": "true",
  "first_seen": "2023-03-10",
  "last_confirmed": "2024-06-01",
  "last_updated": "2024-06-01",
  "evidence_count": 1,
  "tags": [],
  "locale": "en",
  "aliases": []
}