Minified React error #185: Maximum update depth exceeded

What is the full message behind Minified React error #185?

The production build ships the error code and a link instead of the text, and the code list in the React repository maps 185 to the message. The development build throws that same text. In development, the getSnapshot case also logs "The result of getSnapshot should be cached to avoid an infinite loop" first.

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.

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.

Which code causes error 185 in an AI-built React app?

Each case below threw #185 in a production build of react-dom 19.3.1 and the full message in development. In all three, a render triggers the state update that causes the next render, and React stops after 50 nested updates. A page with no error boundary above the crash then loses its whole UI; the React docs say React removes the UI from the screen.

// 1. setState in a layout effect with no dependency array
useLayoutEffect(() => { setCount(count + 1); });

// 2. an inline ref callback is a new function on every render
<p ref={(el) => setNode({ el })}>x</p>

// 3. getSnapshot returns a new object on every call
useSyncExternalStore(subscribe, () => ({ a: 1 }));

Why does my useEffect loop not show error 185 in production?

The limit for passive effects, which is what useEffect uses, sits inside an if (__DEV__) block in ReactFiberWorkLoop.js and only logs a console error. With the update capped at 1000 by a guard, the production build raised no error, and the development build logged "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." React's own check for this loop is not in a production build, so find it in development.

Checklist

How to fix it, then check the fix

1. 01
   Reproduce the screen in development and read the full message in the console:

   npm run dev

2. 02
   List the code that updates state from a layout effect, a ref callback or an external store:

   grep -rnE "useLayoutEffect|useSyncExternalStore|ref=\{\(" src

3. 03Give an effect a dependency array that lists only the values that should run it again, or remove the effect when the state can be worked out during render. The useEffect docs name an Effect that updates state, and so changes its own dependencies, as the cause of an infinite cycle.
4. 04
   Pass a stable function as the ref, and return the stored value from getSnapshot instead of a new object:

   const [node, setNode] = useState(null);
   <p ref={setNode}>x</p>
   
   useSyncExternalStore(subscribe, () => myStore.todos); // the stored value

5. 05Put an error boundary above the routes, so a crash in one component shows a fallback and the rest of the page stays.
6. 06Build the app, open the same screen from the production build, and check that the console has no #185 and the page renders.

Related

Related guides

• Failed to fetch dynamically imported moduleGuide
• Sentry[sentry-vite-plugin] Warning: No auth token provided. Will not upload source maps.Guide
• SentryDo AI-Built Apps Need Sentry Before Launch?Guide

Sources

Official docs behind this checklist

• React repository, error code list (codes.json)
• React repository, ReactFiberWorkLoop.js (nested update limits)
• React docs, useEffect
• React docs, useSyncExternalStore
• React docs, Component (error boundaries)

FAQ

FAQ for builders before launch