React

Too many re-renders / Maximum update depth exceeded

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

In short: A state update runs on every render, which causes another render, forever.

Why it happens

Classic causes: onClick={setOpen(true)} (calls it immediately) instead of onClick={() => setOpen(true)}; calling setState directly in the component body; or a useEffect that sets state that's also in its own dependency array, or depends on an object/array recreated every render.

How to fix it

1. Look for event handlers that call a function instead of passing one.
2. Move any setState in the component body into an event handler or useEffect.
3. In effects, check the dependency array. Don't depend on objects/arrays created during render; memoise them with useMemo or depend on primitive fields.
4. Derive values during render instead of syncing them into state with an effect.

Copy-paste fix prompt

I'm getting this error in my app:

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

[Paste the full error, stack trace, and the file it points to here]

Likely cause: A state update runs on every render, which causes another render, forever.

Task: Find the render loop in this component: event handlers invoked during render, setState in the body, or effects whose dependencies change every render. Fix the specific cause and explain it in one sentence.

Rules:
- First explain the root cause in 2 sentences and list the files you'll change.
- Make the smallest change that fixes it. Don't refactor unrelated code.
- Don't disable security or checks (RLS, auth, signature verification, type checking, CORS allow-all) to make the error disappear.
- Never print or hard-code secret keys.
- Finish by telling me exactly how to verify the fix.

Common with: Cursor, Lovable, Bolt, v0. Last reviewed 2026-11-13.