← All errors

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

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

In one sentence: Your component sets state while rendering, which causes another render, which sets state again, forever.

What it means

Calling a state setter schedules a re-render. If that call happens during render itself (not in an event or effect), every render triggers another one, and React stops it.

Common causes

• Calling the handler instead of passing it: `onClick={setOpen(true)}` runs immediately on every render.
• Calling `setState` directly in the component body.
• (Related) A `useEffect` that sets state it also depends on causes an infinite effect loop, often with 'Maximum update depth exceeded'.

How to fix it

1. Pass a function to event props: `onClick={() => setOpen(true)}`.
2. Move state updates that respond to data into `useEffect` with correct dependencies, or compute the value directly instead of storing it in state.

<button onClick={setCount(count + 1)}>+</button>

<button onClick={() => setCount(count + 1)}>+</button>

Prompt to paste into your AI tool

React says too many re-renders. Find state setters called during render (like onClick={setX(...)}) and wrap them in arrow functions or move them into effects/handlers.

Related errors

• TypeError: Cannot read properties of undefined
• CORS error: blocked by CORS policy
• Hydration failed: server HTML didn't match the client (Next.js)
• Module not found: Can't resolve '...'