componentWillUpdate has been renamed, and is not recommended

Error message

componentWillUpdate has been renamed, and is not recommended for use. See https://react.dev/link/unsafe-component-lifecycles for details.

* Move code with side effects to componentDidUpdate.
* Rename componentWillUpdate to UNSAFE_componentWillUpdate to suppress this warning in non-strict mode. In React 18.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.

Please update the following components: %s

What it means

StrictMode warning listing class components that define componentWillUpdate without UNSAFE_ (ReactStrictModeWarnings.js:271). Like the other cWM* lifecycles, it can fire multiple times per committed update (and once per strict-mode double render), so side effects placed there run on renders that may be thrown away. React directs you to componentDidUpdate for effects and to the UNSAFE_ rename as an explicit acknowledgment.

Source

Thrown at packages/react-reconciler/src/ReactStrictModeWarnings.js:271

        'componentWillReceiveProps has been renamed, and is not recommended for use. ' +
          'See https://react.dev/link/unsafe-component-lifecycles for details.\n\n' +
          '* Move data fetching code or side effects to componentDidUpdate.\n' +
          "* If you're updating state whenever props change, refactor your " +
          'code to use memoization techniques or move it to ' +
          'static getDerivedStateFromProps. Learn more at: https://react.dev/link/derived-state\n' +
          '* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress ' +
          'this warning in non-strict mode. In React 18.x, only the UNSAFE_ name will work. ' +
          'To rename all deprecated lifecycles to their new names, you can run ' +
          '`npx react-codemod rename-unsafe-lifecycles` in your project source folder.\n' +
          '\nPlease update the following components: %s',
        sortedNames,
      );
    }

    if (componentWillUpdateUniqueNames.size > 0) {
      const sortedNames = setToSortedString(componentWillUpdateUniqueNames);

      console.warn(
        'componentWillUpdate has been renamed, and is not recommended for use. ' +
          'See https://react.dev/link/unsafe-component-lifecycles for details.\n\n' +
          '* Move data fetching code or side effects to componentDidUpdate.\n' +
          '* Rename componentWillUpdate to UNSAFE_componentWillUpdate to suppress ' +
          'this warning in non-strict mode. In React 18.x, only the UNSAFE_ name will work. ' +
          'To rename all deprecated lifecycles to their new names, you can run ' +
          '`npx react-codemod rename-unsafe-lifecycles` in your project source folder.\n' +
          '\nPlease update the following components: %s',
        sortedNames,
      );
    }
  };

  let pendingLegacyContextWarning: FiberToFiberComponentsMap = new Map();

  // Tracks components we have already warned about.
  const didWarnAboutLegacyContext = new Set<mixed>();

View on GitHub (pinned to eafeac097b)

Solutions

Move the side effects into componentDidUpdate (all commit-time work belongs there)
For pre-update DOM reads, use the UNSAFE_ rename only after confirming the read is idempotent
Run `npx react-codemod rename-unsafe-lifecycles` across the repo
Replace the class with a function component and useEffect/useLayoutEffect

Example fix

// before
componentWillUpdate(nextProps) { document.title = nextProps.title; }

// after
componentDidUpdate(nextProps) { document.title = nextProps.title; }

Defensive patterns

Strategy: type-guard

Validate before calling

function definesComponentWillUpdate(ctor) {
  const m = ctor && ctor.prototype && ctor.prototype.componentWillUpdate;
  return typeof m === 'function' && m.__suppressDeprecationWarning !== true;
}

Type guard

function definesComponentWillUpdate(ctor) {
  const m = ctor && ctor.prototype && ctor.prototype.componentWillUpdate;
  return typeof m === 'function' && m.__suppressDeprecationWarning !== true;
}

Prevention

Place all post-update work in componentDidUpdate
Assume strict-mode double invocation for every legacy lifecycle when testing
Convert classes with pre-update DOM reads to function components with useLayoutEffect

When it happens

Trigger: Dev build, <StrictMode> around a class component defining componentWillUpdate as a function (without the compat suppress flag). Names are deduped and flushed in one sorted list.

Common situations: Legacy classes doing DOM measurement or logging before the update; analytics code in componentWillUpdate; components copied from pre-2018 codebases during a React 18/19 upgrade.

Related errors

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