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

  • React

What it means

A component keeps changing its own state, which re-renders it, which changes the state again. React stops the loop instead of freezing the page.

Why it happens

  • Calling a function in an event prop instead of passing it: onClick={setOpen(true)} instead of onClick={() => setOpen(true)}.
  • Setting state directly in the component body, outside an effect or handler.
  • An effect that updates a value it also depends on.

How to fix it

  1. Pass functions to event props: onClick={() => doThing()}.
  2. Move state updates into event handlers or effects.
  3. Check effect dependencies: an effect should not set the state it listens to without a condition.

Let your AI find the cause

Paste this into Claude Code, Cursor, Lovable or whichever AI built your app. It looks first and changes nothing until you have read the answer.

My React app shows 'Too many re-renders' or 'Maximum update depth exceeded'. Without changing anything yet, find the component in the error and list every place it sets state, marking any that run during render or inside an effect that depends on the same state.