DevFixes
ReactIntermediateHigh severity

Too many re-renders. React limits the number of renders

A component is updating state during render or triggering an effect loop.

5-20 min Popularity 89/100 Verified 2026-07-21
Debug with AI

What does this error mean?

React detected a render-update-render cycle that would continue indefinitely, so it stopped the component.

Why does this happen?

  • Calling a state setter directly in the component body.
  • Invoking an event handler instead of passing a function.
  • An effect updates a value that is also in its dependency list.
  • A derived object or function changes on every render.

AI explanation

Plain-English analysis

Rendering must be a calculation, not an action that immediately schedules another render. A state update in the render path creates a loop: render, update, render again.

Quick fix

Terminal
Pass event handlers as functions.
Move synchronization into a correctly-scoped effect.
Expected output: The component renders a stable result and updates only after an event or dependency change.

Step-by-step fix

1Remove state updates from renderCompute derived values directly or update state from an event handler.84%
2Fix the effect dependency loopAvoid setting a dependency to a new value on every effect run.59%
3Pass a callback to the event propUse `onClick={() => setOpen(true)}` rather than calling the setter while rendering.42%

Alternative solutions

React

const total = items.reduce(...);

Do not store values in state when they can be derived during render.

React effect

useEffect(() => { /* external sync */ }, [stableDependency]);

Effects are for synchronization with external systems.

Real example

Broken
tsx
function Panel() {
  const [open, setOpen] = useState(false);
  setOpen(true);
  return <div>{String(open)}</div>;
}
Corrected
tsx
function Panel() {
  const [open, setOpen] = useState(false);
  return <button onClick={() => setOpen(true)}>{open ? "Open" : "Closed"}</button>;
}

Frequently asked questions

Only if unstable derived values are retriggering an effect. It will not fix a state setter called directly during render.

References