Error: Too many re-renders. React limits the number of renders to prevent an infinite loop
You're calling a state setter directly during render instead of inside an event handler or effect — most often by writing `onClick={setCount(count + 1)}` instead of `onClick={() => setCount(count + 1)}`. React caps the render loop and throws rather than freezing the tab.
What causes this error
React re-renders a component whenever its state changes. If a state setter is invoked unconditionally during the render itself — rather than in response to an event or effect — every render triggers another state update, which triggers another render, forever. React detects the loop and throws instead of hanging the page.
The Fix
// Wrong — calls setCount immediately during render, not on click
<button onClick={setCount(count + 1)}>Increment</button>
// Fix — wrap it in a function so it only runs on click
<button onClick={() => setCount(count + 1)}>Increment</button>The same mistake shows up less obviously when a state update happens unconditionally inside the component body itself, outside any handler or effect.
Common causes / variations
- Forgetting the arrow-function wrapper on an inline event handler
- Calling a setter directly in the render body to "sync" derived state instead of computing it inline or in an effect
- A `useEffect` with a dependency that the effect itself updates, without a stabilizing condition
Related errors
See also: Maximum update depth exceeded, Cannot update a component while rendering a different component.
Comments
Loading comments...