{
  "id": "react/warning-unstable-flushdiscrete-updates",
  "signature": "Warning: unstable_flushDiscreteUpdates: Cannot flush updates when React is already rendering.",
  "signature_zh": "警告: unstable_flushDiscreteUpdates: 当 React 已经在渲染时无法刷新更新。",
  "regex": "Warning: unstable_flushDiscreteUpdates: Cannot flush updates when React is already rendering\\.",
  "domain": "react",
  "category": "runtime_error",
  "subcategory": null,
  "root_cause": "React's internal scheduling mechanism detects a recursive state update during rendering, often caused by calling setState in a useEffect without proper dependencies, or by using synchronous event handlers that trigger state updates during the render phase.",
  "root_cause_type": "generic",
  "root_cause_zh": "React 的内部调度机制检测到渲染期间发生递归状态更新，通常是由于在 useEffect 中调用 setState 而没有正确的依赖项，或者使用同步事件处理器在渲染阶段触发状态更新。",
  "versions": [
    {
      "version": "React 18.2.0",
      "introduced": null,
      "deprecated": null,
      "removed": null,
      "behavior_change": null,
      "status": "active"
    },
    {
      "version": "React 18.3.0-canary",
      "introduced": null,
      "deprecated": null,
      "removed": null,
      "behavior_change": null,
      "status": "active"
    },
    {
      "version": "React 19.0.0-rc",
      "introduced": null,
      "deprecated": null,
      "removed": null,
      "behavior_change": null,
      "status": "active"
    }
  ],
  "os_specific": {},
  "dead_ends": [
    {
      "action": "Add a setTimeout around the setState call to delay the update",
      "why_fails": "This masks the issue but doesn't fix the root cause; the state update may still cause a re-render loop and degrade performance.",
      "fail_rate": 0.7,
      "condition": "",
      "sources": []
    },
    {
      "action": "Use ReactDOM.flushSync to force synchronous updates",
      "why_fails": "flushSync is meant for specific use cases and can actually trigger the same warning if called during rendering.",
      "fail_rate": 0.85,
      "condition": "",
      "sources": []
    },
    {
      "action": "Ignore the warning as it's only in development mode",
      "why_fails": "The warning indicates a real issue that can cause infinite loops or UI inconsistencies in production.",
      "fail_rate": 0.9,
      "condition": "",
      "sources": []
    }
  ],
  "workarounds": [
    {
      "action": "Review and fix useEffect dependencies: ensure state updates are not triggered inside the effect itself without proper memoization. Example: useEffect(() => { setCount(prev => prev + 1); }, []); // Only on mount, not on every render",
      "success_rate": 0.85,
      "how": "Review and fix useEffect dependencies: ensure state updates are not triggered inside the effect itself without proper memoization. Example: useEffect(() => { setCount(prev => prev + 1); }, []); // Only on mount, not on every render",
      "condition": "",
      "sources": []
    },
    {
      "action": "Use useReducer instead of useState for complex state logic to avoid accidental recursion. Example: const [state, dispatch] = useReducer(reducer, initialState);",
      "success_rate": 0.8,
      "how": "Use useReducer instead of useState for complex state logic to avoid accidental recursion. Example: const [state, dispatch] = useReducer(reducer, initialState);",
      "condition": "",
      "sources": []
    },
    {
      "action": "Wrap state updates in event handlers (e.g., onClick) rather than in the render phase or useEffect without dependencies. Ensure the update is triggered by user interaction, not during render.",
      "success_rate": 0.9,
      "how": "Wrap state updates in event handlers (e.g., onClick) rather than in the render phase or useEffect without dependencies. Ensure the update is triggered by user interaction, not during render.",
      "condition": "",
      "sources": []
    }
  ],
  "workarounds_zh": [
    "Review and fix useEffect dependencies: ensure state updates are not triggered inside the effect itself without proper memoization. Example: useEffect(() => { setCount(prev => prev + 1); }, []); // Only on mount, not on every render",
    "Use useReducer instead of useState for complex state logic to avoid accidental recursion. Example: const [state, dispatch] = useReducer(reducer, initialState);",
    "Wrap state updates in event handlers (e.g., onClick) rather than in the render phase or useEffect without dependencies. Ensure the update is triggered by user interaction, not during render."
  ],
  "transition_graph": {
    "leads_to": [],
    "preceded_by": [],
    "frequently_confused_with": []
  },
  "official_doc_url": "https://react.dev/reference/react/useEffect",
  "official_doc_section": null,
  "error_code": null,
  "verification_tier": "ai_generated",
  "confidence": 0.82,
  "fix_success_rate": 0.85,
  "resolvable": "true",
  "first_seen": "2024-01-10",
  "last_confirmed": "2024-06-01",
  "last_updated": "2024-06-01",
  "evidence_count": 1,
  "tags": [],
  "locale": "en",
  "aliases": []
}