185

185

Error message

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.

What it means

The nested-update guard: when nestedUpdateCount exceeds NESTED_UPDATE_LIMIT (50) and the tracked update phase attributes the chain to commit-phase lifecycles (error code 185), React throws this variant targeting the classic componentDidUpdate -> setState -> componentDidUpdate loop that never converges. The limit exists because an unbounded loop would freeze the page.

Source

Thrown at packages/react-reconciler/src/ReactFiberWorkLoop.js:5256

          (executionContext & RenderContext) !== NoContext
        ) {
          // This loop was identified only because of the instrumentation gated with enableInfiniteRenderLoopDetection,
          // warn instead of throwing, unless enableInfiniteRenderLoopDetectionForceThrow.
          if (enableInfiniteRenderLoopDetectionForceThrow) {
            throwForcedInfiniteRenderLoopError(
              workInProgressRoot,
              workInProgressRootRenderLanes,
            );
          } else if (__DEV__) {
            console.error(
              'Maximum update depth exceeded. This could be an infinite loop. This can happen when a component ' +
                'repeatedly calls setState during render phase or inside useLayoutEffect, ' +
                'causing infinite render loop. React limits the number of nested updates to ' +
                'prevent infinite loops.',
            );
          }
        } else {
          throw new Error(
            '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.',
          );
        }
      } else if (updateKind === NESTED_UPDATE_PHASE_SPAWN) {
        if (enableInfiniteRenderLoopDetectionForceThrow) {
          throwForcedInfiniteRenderLoopError(
            workInProgressRoot,
            workInProgressRootRenderLanes,
          );
        } else if (__DEV__) {
          console.error(
            'Maximum update depth exceeded. This could be an infinite loop. This can happen when a component ' +
              'repeatedly calls setState during render phase or inside useLayoutEffect, ' +
              'causing infinite render loop. React limits the number of nested updates to ' +
              'prevent infinite loops.',

View on GitHub (pinned to eafeac097b)

Solutions

Wrap the componentDidUpdate setState in an equality check against prevProps/current state so it only fires on real changes
Replace the prop-to-state sync with getDerivedStateFromProps, its designed replacement, or derive during render
Memoize the parent's inputs (or use shouldComponentUpdate/PureComponent/memo) so identical data does not trigger the child's lifecycle
Lift the shared state to the closest common parent so one update replaces the loop

Example fix

// before
componentDidUpdate(prevProps) {
  this.setState({count: this.props.count}); // always writes -> 50+ nested updates
}

// after
componentDidUpdate(prevProps) {
  if (prevProps.count !== this.props.count) {
    this.setState({count: this.props.count});
  }
}

Defensive patterns

Strategy: validation

Validate before calling

componentDidUpdate(prevProps) {
  if (this.props.value !== prevProps.value && this.props.value !== this.state.value) {
    this.setState({value: this.props.value});
  }
}

Prevention

Always compare against prevProps/current state before setState in componentDidUpdate
Prefer getDerivedStateFromProps or render-time derivation over lifecycle state sync
Stabilize parent props (memoize objects/callbacks) so children's update lifecycles do not fire on identical data

When it happens

Trigger: A class component calling setState (or forceUpdate) inside componentDidUpdate or componentWillUpdate without a terminating condition, so each commit schedules another commit until the 50-update cap trips.

Common situations: componentDidUpdate syncing props to state unconditionally; two components updating each other in lifecycle ping-pong; parent passing a new object literal each render while the child re-syncs state from props in componentDidUpdate.

Related errors

AI-assisted analysis of facebook/react@eafeac097b (2026-08-21). Data as JSON: /api/errors/59cb9ef4921e11f2. Report an issue: GitHub.