Fix guides / React: "Too many re-renders"

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

The page goes white and the console says Error: Too many re-renders. React limits the number of renders to prevent an infinite loop. This is one of the most common crashes in apps generated by Lovable, Bolt, v0, and Cursor, and the fix is almost always one line.

Why it happens

Something calls a state setter (like setCount or setUser) while the component is rendering. Setting state triggers another render, which sets state again, forever. React stops after a few dozen rounds and throws. The usual suspects:

• An event handler written as a call. onClick={setOpen(true)} runs immediately on every render instead of on click.
• A setter in the component body. For example if (data) setItems(data) sitting outside any handler or effect.
• Copying props into state on every render. setName(props.name) at the top level of the component.

Note: if the browser freezes or your network tab fills with the same request instead, that is a useEffect loop, not this error. That case is covered further down.

Step 1: find the line

Open the browser console and expand the error. The component stack names the component that looped. In that file, search for set and check every call that is not inside a function, a useEffect, or a promise callback.

Step 2: fix handlers written as calls

// Broken: runs during render
<button onClick={setOpen(true)}>Open</button>
<button onClick={handleDelete(item.id)}>Delete</button>

// Fixed: pass a function
<button onClick={() => setOpen(true)}>Open</button>
<button onClick={() => handleDelete(item.id)}>Delete</button>

Step 3: stop setting state in the body

If a value can be worked out from props or other state, do not store it at all. Calculate it during render:

// Broken
const [total, setTotal] = useState(0);
setTotal(items.reduce((s, i) => s + i.price, 0));

// Fixed
const total = items.reduce((s, i) => s + i.price, 0);

If you really need to react to a change, such as loaded data, do it in an effect with a dependency list:

useEffect(() => {
  if (data) setItems(data);
}, [data]);

The related effect loop

An effect that sets state and also lists that state, or a new object or array, in its dependencies will run forever without this exact error. Common examples are useEffect(fetchItems, [items]) or a filters object created fresh on every render. Depend on the primitive values you actually use, for example [filters.status, filters.page], or wrap the object in useMemo.

Check the fix

1. The page renders and the console has no render loop error.
2. Buttons only act when clicked.
3. In the Network tab, each request fires once per page load, not continuously.

Last updated 2026-10-22.