Maximum update depth exceeded

State updates kept triggering more state updates in a loop, usually through an effect or a callback, so React stopped them.

Browser console
Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

Also appears as

  • 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.
  • Minified React error #185; visit https://react.dev/errors/185 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

Prompt to fix it

My React app shows "Maximum update depth exceeded". Find the effect, layout effect, or callback that sets state on every render. Check dependency arrays for objects, arrays, or functions recreated each render, effects that depend on the state they set, and child components that call a parent’s onChange from an effect. Fix the loop at its source: depend on primitive values, use functional state updates, or compute derived values during render. Don’t remove the dependency array or disable the exhaustive-deps lint rule.

Paste into Layerwise or any AI coding tool.

What it means

A state update causes a render, and code that runs after the render can update state again. React allows that chain to repeat only so many times in a row. After 50 nested updates it assumes an infinite loop and throws. This loop goes through code that runs after each render, such as layout effects, ref callbacks, or class lifecycle methods. “Too many re-renders” is the version for state set during render itself.

The usual shape: an effect sets state, and one of its dependencies is an object, array, or function created fresh on every render. React compares dependencies by identity, so a new {} or [] counts as changed every time. The effect runs, sets state, the component renders, and the cycle repeats. A loop through useEffect usually logs the useEffect version of this message as a console warning while the page keeps re-rendering.

Loops that cross two components are harder to spot. A child calls onChange from an effect, the parent stores the value in state, and the new render hands the child a new prop that fires the effect again.

Common causes

  • A useEffect sets state and has no dependency array, so it runs after every render.
  • A dependency is an object, array, or function recreated on each render, such as options={{ page: 1 }} or an inline callback.
  • An effect sets the same state it depends on, such as setItems([...items, item]) with [items] as dependencies.
  • A child reports a value to its parent from an effect, and the parent’s update triggers the child’s effect again.
  • A ref callback or useLayoutEffect sets state every time it runs.

How to fix it

  1. Open the component in the stack trace and list every effect and callback that calls a setter.
  2. Give each effect a dependency array with only the values it reads, and check that none of them is rebuilt on every render.
  3. Depend on primitive values such as user.id instead of whole objects, or create the object inside the effect.
  4. Use the updater form, setItems((prev) => [...prev, item]), so the effect doesn’t need to depend on the state it changes.
  5. If the value can be computed from props or state, compute it during render and delete the effect.

Example fix

// Loops: filters is a new object on every render, so the effect always reruns.
const filters = { status, page };
useEffect(() => {
  setResults(search(filters));
}, [filters]);

// Stable: depend on the primitive values the effect reads.
useEffect(() => {
  setResults(search({ status, page }));
}, [status, page]);

Related errors

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

Too many re-renders

A component changes its own state while it renders, so React renders it again and again until it stops the loop.

RangeError: Maximum call stack size exceeded

Maximum call stack size exceeded

A function kept calling itself, directly or through other functions, until JavaScript ran out of room to keep track of the calls.

Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used: - A server/client branch `if (typeof window !== 'undefined')`. - Variable input such as `Date.now()` or `Math.random()` which changes each time it's called. - Date formatting in a user's locale which doesn't match the server. - External changing data without sending a snapshot of it along with the HTML. - Invalid HTML tag nesting. It can also happen if the client has a browser extension installed which messes with the HTML before React loaded. https://react.dev/link/hydration-mismatch

Hydration failed

The HTML the server sent didn’t match what React rendered first in the browser, so React threw that part away and rebuilt it on the client.

Each child in a list should have a unique "key" prop. Check the render method of `TodoList`. See https://react.dev/link/warning-keys for more information.

Each child in a list should have a unique "key" prop

A list rendered with map gave its items no stable ID, so React can’t tell which item is which when the list changes.

Build with an agent that checks its work

The Layerwise agent clicks through the live preview and reads the console, so it catches errors before you do.

DownloadRead the docs