{
  "id": "react/setstate-on-unmounted-component-with-async",
  "signature": "Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.",
  "signature_zh": "警告：无法在已卸载的组件上执行 React 状态更新。这是一个空操作，但表明您的应用程序中存在内存泄漏。要修复，请在 useEffect 清理函数中取消所有订阅和异步任务。",
  "regex": "Warning: Can't perform a React state update on an unmounted component",
  "domain": "react",
  "category": "runtime_error",
  "subcategory": null,
  "root_cause": "An async operation (e.g., fetch, timeout) completes after the component has unmounted, and the callback attempts to set state on the unmounted component.",
  "root_cause_type": "generic",
  "root_cause_zh": "异步操作（例如 fetch、timeout）在组件卸载后完成，回调尝试在已卸载的组件上设置状态。",
  "versions": [
    {
      "version": "React 18.2.0",
      "introduced": null,
      "deprecated": null,
      "removed": null,
      "behavior_change": null,
      "status": "active"
    },
    {
      "version": "React 19.0.0",
      "introduced": null,
      "deprecated": null,
      "removed": null,
      "behavior_change": null,
      "status": "active"
    },
    {
      "version": "React 16.14.0",
      "introduced": null,
      "deprecated": null,
      "removed": null,
      "behavior_change": null,
      "status": "active"
    }
  ],
  "os_specific": {},
  "dead_ends": [
    {
      "action": "",
      "why_fails": "The async task still executes, wasting resources; React recommends cleanup instead.",
      "fail_rate": 0.9,
      "condition": "",
      "sources": []
    },
    {
      "action": "",
      "why_fails": "It can lead to memory leaks and unpredictable behavior in production, especially with frequent mount/unmount cycles.",
      "fail_rate": 0.95,
      "condition": "",
      "sources": []
    }
  ],
  "workarounds": [
    {
      "action": "Use an AbortController with fetch and call abort() in the useEffect cleanup: `const controller = new AbortController(); useEffect(() => { fetch(url, { signal: controller.signal }); return () => controller.abort(); }, []);`",
      "success_rate": 0.9,
      "how": "Use an AbortController with fetch and call abort() in the useEffect cleanup: `const controller = new AbortController(); useEffect(() => { fetch(url, { signal: controller.signal }); return () => controller.abort(); }, []);`",
      "condition": "",
      "sources": []
    },
    {
      "action": "For timeouts, use clearTimeout in cleanup: `useEffect(() => { const timer = setTimeout(() => setState(...), 1000); return () => clearTimeout(timer); }, []);`",
      "success_rate": 0.95,
      "how": "For timeouts, use clearTimeout in cleanup: `useEffect(() => { const timer = setTimeout(() => setState(...), 1000); return () => clearTimeout(timer); }, []);`",
      "condition": "",
      "sources": []
    },
    {
      "action": "Use a library like `use-http` or `react-query` that handles cancellation automatically.",
      "success_rate": 0.85,
      "how": "Use a library like `use-http` or `react-query` that handles cancellation automatically.",
      "condition": "",
      "sources": []
    }
  ],
  "workarounds_zh": [
    "Use an AbortController with fetch and call abort() in the useEffect cleanup: `const controller = new AbortController(); useEffect(() => { fetch(url, { signal: controller.signal }); return () => controller.abort(); }, []);`",
    "For timeouts, use clearTimeout in cleanup: `useEffect(() => { const timer = setTimeout(() => setState(...), 1000); return () => clearTimeout(timer); }, []);`",
    "Use a library like `use-http` or `react-query` that handles cancellation automatically."
  ],
  "transition_graph": {
    "leads_to": [],
    "preceded_by": [],
    "frequently_confused_with": []
  },
  "official_doc_url": "https://react.dev/reference/react/useEffect#cleaning-up-an-effect",
  "official_doc_section": null,
  "error_code": null,
  "verification_tier": "ai_generated",
  "confidence": 0.87,
  "fix_success_rate": 0.9,
  "resolvable": "true",
  "first_seen": "2023-09-10",
  "last_confirmed": "2024-06-01",
  "last_updated": "2024-06-01",
  "evidence_count": 1,
  "tags": [],
  "locale": "en",
  "aliases": []
}