Next.js · browser console

Maximum update depth exceeded

Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.

What it means

A component keeps updating its own state in a loop, so React stops it. It's a React error, but agents cause it often when they wire up effects.

Common causes

• setState in a useEffect with no dependency array
• An object or array created during render used as an effect dependency
• onClick={setOpen(true)} instead of onClick={() => setOpen(true)}

How to fix it

1. Give the effect a dependency array, and only list values that really change
2. Memoize object or array dependencies, or depend on their primitive fields
3. Pass a function to event props instead of calling it

Prompt for Cursor or Claude Code

React hit Maximum update depth exceeded. Find the effect or handler that sets state on every render, explain the loop in one sentence, and fix it with correct dependencies or by passing a function instead of calling it.

Not quite your error? Paste yours into the free VibeBoot Doctor or browse the Next.js error fixer.