# Error: Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state.

- **ID:** `react/cannot-update-during-existing-state-transition`
- **Domain:** react
- **Category:** runtime_error
- **Verification:** ai_generated
- **Fix Rate:** 95%

## Root Cause

A state update (setState) is triggered synchronously inside the render method or a render-phase lifecycle, violating React's rule that render must be pure.

## Version Compatibility

| Version | Status | Introduced | Deprecated |
|---------|--------|------------|------------|
| React 18.2.0 | active | — | — |
| React 19.0.0 | active | — | — |
| React 16.8.0 | active | — | — |

## Workarounds

1. **Move the state update to a useEffect or event handler: instead of `render() { setState(...); }`, use `useEffect(() => { setState(...); }, []);`** (95% success)
   ```
   Move the state update to a useEffect or event handler: instead of `render() { setState(...); }`, use `useEffect(() => { setState(...); }, []);`
   ```
2. **If the state update depends on props change, use `useEffect` with the relevant prop as dependency: `useEffect(() => { setState(...); }, [prop]);`** (90% success)
   ```
   If the state update depends on props change, use `useEffect` with the relevant prop as dependency: `useEffect(() => { setState(...); }, [prop]);`
   ```

## Dead Ends

- **** — Any synchronous state update during render is forbidden, regardless of location. (95% fail)
- **** — The error is thrown by React internally and cannot be caught by user try-catch. (90% fail)