← All errors · Bolt

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

Exact error

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

What it means

A state update runs during render, which triggers another render, endlessly.

Likely causes

• Calling a setter directly in the component body.
• onClick={setCount(1)} (calls immediately) instead of passing a function.

How to fix it

1. Pass a function to event handlers:

   // wrong
   <button onClick={setOpen(true)}>Open</button>
   // right
   <button onClick={() => setOpen(true)}>Open</button>

2. Move derived/initial updates into useEffect with correct dependencies, or compute values without state.

Related errors

• Objects are not valid as a React child
• Hydration failed because the initial UI does not match what was rendered on the server