# Warning: unstable_flushDiscreteUpdates: Cannot flush updates when React is already rendering.

- **ID:** `react/warning-unstable-flushdiscrete-updates`
- **Domain:** react
- **Category:** runtime_error
- **Verification:** ai_generated
- **Fix Rate:** 85%

## 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.

## Version Compatibility

| Version | Status | Introduced | Deprecated |
|---------|--------|------------|------------|
| React 18.2.0 | active | — | — |
| React 18.3.0-canary | active | — | — |
| React 19.0.0-rc | active | — | — |

## Workarounds

1. **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** (85% success)
   ```
   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
   ```
2. **Use useReducer instead of useState for complex state logic to avoid accidental recursion. Example: const [state, dispatch] = useReducer(reducer, initialState);** (80% success)
   ```
   Use useReducer instead of useState for complex state logic to avoid accidental recursion. Example: const [state, dispatch] = useReducer(reducer, initialState);
   ```
3. **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.** (90% success)
   ```
   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.
   ```

## Dead Ends

- **Add a setTimeout around the setState call to delay the update** — This masks the issue but doesn't fix the root cause; the state update may still cause a re-render loop and degrade performance. (70% fail)
- **Use ReactDOM.flushSync to force synchronous updates** — flushSync is meant for specific use cases and can actually trigger the same warning if called during rendering. (85% fail)
- **Ignore the warning as it's only in development mode** — The warning indicates a real issue that can cause infinite loops or UI inconsistencies in production. (90% fail)