← All errors · BoltReact & Next.js rendering errors

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.

Prevent this next time

• Add ESLint with eslint-config-next (includes the React Hooks rules) and fix warnings before shipping.
• Run `next build` in CI on every pull request so hydration and render errors surface before production.

Guide: catch outages before your users do.

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