React
React too many re-renders infinite loop
Too many re-renders. React limits the number of renders to prevent an infinite loop.
React detected a render loop where state updates keep causing immediate re-renders, and it stopped the component to prevent the app from locking up.
Observed message
Too many re-renders. React limits the number of renders to prevent an infinite loop.
Why it happens
- A state setter is called directly during render.
- Render logic triggers an update every time the component renders.
- Derived state or event wiring creates an immediate rerender loop.
How to fix it
- Never call state setters directly while rendering.
- Move updates into event handlers or effects with proper guards.
- Check derived state and conditional rendering logic for immediate feedback loops.
