{
  "id": "react/useeffect-cleanup-return-promise",
  "signature": "Warning: useEffect must not return anything besides a function, which is used for clean-up. It looks like you wrote useEffect(async () => ...) or returned a Promise.",
  "signature_zh": "警告：useEffect 不能返回除函数以外的任何内容，函数用于清理。看起来你写了 useEffect(async () => ...) 或返回了一个 Promise。",
  "regex": "useEffect must not return anything besides a function",
  "domain": "react",
  "category": "runtime_error",
  "subcategory": null,
  "root_cause": "The cleanup function of useEffect must be either undefined or a synchronous function. Returning a Promise (e.g., from an async function) causes this warning because React cannot call .then() on the cleanup.",
  "root_cause_type": "generic",
  "root_cause_zh": "useEffect 的清理函数必须是 undefined 或同步函数。返回 Promise（例如来自 async 函数）会导致此警告，因为 React 无法在清理上调用 .then()。",
  "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"
    }
  ],
  "os_specific": {},
  "dead_ends": [
    {
      "action": "",
      "why_fails": "The async function still returns a Promise, which React interprets as an invalid cleanup return value.",
      "fail_rate": 0.9,
      "condition": "",
      "sources": []
    },
    {
      "action": "",
      "why_fails": "Promise.resolve() returns a Promise, still violating the rule that cleanup must be a function or undefined.",
      "fail_rate": 0.85,
      "condition": "",
      "sources": []
    },
    {
      "action": "",
      "why_fails": "The return value of the async function is a Promise, regardless of wrapping.",
      "fail_rate": 0.8,
      "condition": "",
      "sources": []
    }
  ],
  "workarounds": [
    {
      "action": "Define an async function inside useEffect and call it immediately, then return a cleanup function. Example: useEffect(() => { const fetchData = async () => { /* ... */ }; fetchData(); return () => { /* cleanup */ }; }, []);",
      "success_rate": 0.95,
      "how": "Define an async function inside useEffect and call it immediately, then return a cleanup function. Example: useEffect(() => { const fetchData = async () => { /* ... */ }; fetchData(); return () => { /* cleanup */ }; }, []);",
      "condition": "",
      "sources": []
    },
    {
      "action": "Use a custom hook like useAsyncEffect from a library (e.g., react-use) that handles async effects properly.",
      "success_rate": 0.85,
      "how": "Use a custom hook like useAsyncEffect from a library (e.g., react-use) that handles async effects properly.",
      "condition": "",
      "sources": []
    },
    {
      "action": "For simple cases, use .then() and .catch() instead of async/await: useEffect(() => { fetch('/data').then(setData).catch(handleError); return () => { /* cleanup */ }; }, []);",
      "success_rate": 0.9,
      "how": "For simple cases, use .then() and .catch() instead of async/await: useEffect(() => { fetch('/data').then(setData).catch(handleError); return () => { /* cleanup */ }; }, []);",
      "condition": "",
      "sources": []
    }
  ],
  "workarounds_zh": [
    "Define an async function inside useEffect and call it immediately, then return a cleanup function. Example: useEffect(() => { const fetchData = async () => { /* ... */ }; fetchData(); return () => { /* cleanup */ }; }, []);",
    "Use a custom hook like useAsyncEffect from a library (e.g., react-use) that handles async effects properly.",
    "For simple cases, use .then() and .catch() instead of async/await: useEffect(() => { fetch('/data').then(setData).catch(handleError); return () => { /* cleanup */ }; }, []);"
  ],
  "transition_graph": {
    "leads_to": [],
    "preceded_by": [],
    "frequently_confused_with": []
  },
  "official_doc_url": "https://reactjs.org/docs/hooks-effect.html",
  "official_doc_section": null,
  "error_code": null,
  "verification_tier": "ai_generated",
  "confidence": 0.88,
  "fix_success_rate": 0.92,
  "resolvable": "true",
  "first_seen": "2023-06-20",
  "last_confirmed": "2024-06-01",
  "last_updated": "2024-06-01",
  "evidence_count": 1,
  "tags": [],
  "locale": "en",
  "aliases": []
}