Too many re-renders ⚛️ React

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

A state update runs during render, which triggers another render, which updates state again — forever.

Seen on: React

Meaning

Calling setState unconditionally in the component body — or passing onClick={setCount(1)} instead of a function — makes every render schedule another one.

Common causes

  • onClick={handle()} instead of onClick={handle} or onClick={() => handle()}
  • setState called directly in the component body
  • useEffect without a dependency array that sets state
  • useEffect dependency that changes every render (new object/array literal)

⚡ Quick fix

  1. Pass functions to event props, don’t call them
  2. Move state updates into event handlers or effects with correct dependencies
  3. Memoize object/array dependencies with useMemo

Detailed fix by platform

React

  1. Common fix:
    jsx
    <button onClick={setOpen(true)}>Open</button>          // ❌ runs during render
<button onClick={() => setOpen(true)}>Open</button>    // ✅

How to diagnose

  1. Event props — Any onX={fn()}?
  2. Render body — Any unconditional setState?
  3. Effects — Dependency arrays correct?

🧠 Still stuck? Analyze your error

Paste the full message, response headers or stack trace — we'll detect the platform and point to the most likely cause.