An infinite loop in React usually means a render or effect writes state that immediately triggers the same path again. The fix is to find the unstable value, not to add more guards at random.
1. Confirm where the loop lives
Note whether the browser freezes on mount, after a click, or when a parent re-renders. React DevTools “Highlight updates” and a log at the top of the component show how often it paints.
2. Inspect effect dependency arrays
Look for objects, arrays or functions created inline in the render body and listed as dependencies. Those new references make the effect run every time, even when the logical value did not change.
3. Separate derived values from state
If you are storing a value that can be calculated from props or existing state, compute it during render instead of syncing it in an effect. Effects that only exist to keep two pieces of state aligned are a common loop source.
4. Stabilise intentional callbacks
When a child effect depends on a callback from a parent, keep that callback stable or depend on the primitive inputs instead. Prefer event handlers for user-driven work rather than modelling every click as state plus effect.
A useful diagnostic: name the state setter that fires on every pass and the dependency that changed to cause it. One clear pair is enough to plan the fix.
What to bring to a support session
A minimal component snippet, the dependency array, and whether Strict Mode is enabled. Remove proprietary business logic before sharing.
Official references
- React: You Might Not Need an Effect
- React: Synchronizing with Effects
- React: Removing Effect Dependencies
Published 3 November 2026. Check changes against your own environment and your team’s process.