# Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

- **ID:** `react/too-many-re-renders-infinite-loop`
- **Domain:** react
- **Category:** runtime_error
- **Verification:** ai_generated
- **Fix Rate:** 92%

## Root Cause

A component's state update triggers a re-render, which in turn triggers another state update synchronously (e.g., setState called directly in the render body or in an effect without proper dependencies), causing an infinite loop.

## Version Compatibility

| Version | Status | Introduced | Deprecated |
|---------|--------|------------|------------|
| react@16.8.0+ | active | — | — |
| react@17.0.2 | active | — | — |
| react@18.2.0 | active | — | — |

## Workarounds

1. **Ensure state updates are not called directly in the render body. Move them to event handlers or useEffect with proper dependencies.** (90% success)
   ```
   Ensure state updates are not called directly in the render body. Move them to event handlers or useEffect with proper dependencies.
   ```
2. **If using useEffect, ensure the dependency array is correct and does not include variables that change on every render unnecessarily.** (85% success)
   ```
   If using useEffect, ensure the dependency array is correct and does not include variables that change on every render unnecessarily.
   ```

## Dead Ends

- **** — There is no configurable limit; React hardcodes the limit to prevent infinite loops. Increasing it would only delay the crash. (95% fail)
- **** — useCallback does not prevent the infinite loop; it only prevents unnecessary re-creation of functions. The loop is caused by the call itself, not the function identity. (70% fail)
- **** — While this may break the synchronous loop, it is a hack that leads to unpredictable behavior and does not address the root cause. (60% fail)