facebook/react · warning

componentWillMount has been renamed, and is not recommended

Error message

componentWillMount 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 componentDidMount, and set initial state in the constructor.
* Rename componentWillMount to UNSAFE_componentWillMount 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

ReactStrictModeWarnings records every class component mounted under StrictLegacyMode that defines componentWillMount without the UNSAFE_ prefix (unless the method carries __suppressDeprecationWarning, as set by react-lifecycles-compat). The batch is flushed as this console.warn listing the sorted component names. componentWillMount is unsafe under concurrent rendering because React may invoke it multiple times before commit, so React 18+ requires moving it or renaming it.

Source

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

    if (UNSAFE_componentWillUpdateUniqueNames.size > 0) {
      const sortedNames = setToSortedString(
        UNSAFE_componentWillUpdateUniqueNames,
      );
      console.error(
        'Using UNSAFE_componentWillUpdate in strict mode is not recommended ' +
          'and may indicate bugs in your code. ' +
          'See https://react.dev/link/unsafe-component-lifecycles for details.\n\n' +
          '* Move data fetching code or side effects to componentDidUpdate.\n' +
          '\nPlease update the following components: %s',
        sortedNames,
      );
    }

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

      console.warn(
        'componentWillMount has been renamed, and is not recommended for use. ' +
          'See https://react.dev/link/unsafe-component-lifecycles for details.\n\n' +
          '* Move code with side effects to componentDidMount, and set initial state in the constructor.\n' +
          '* Rename componentWillMount to UNSAFE_componentWillMount 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 (componentWillReceivePropsUniqueNames.size > 0) {
      const sortedNames = setToSortedString(
        componentWillReceivePropsUniqueNames,
      );

      console.warn(

View on GitHub (pinned to eafeac097b)

Solutions

  1. Move side effects to componentDidMount and set initial state in the constructor
  2. Run `npx react-codemod rename-unsafe-lifecycles` to bulk-rename remaining cases to UNSAFE_componentWillMount
  3. For third-party components, upgrade the library or shim with react-lifecycles-compat (its __suppressDeprecationWarning flag silences detection)
  4. Rename manually with UNSAFE_ only as a stopgap - in React 18.x only the UNSAFE_ name works

Example fix

// before
class Example extends React.Component {
  componentWillMount() { this.fetch(this.props.id); }
}

// after
class Example extends React.Component {
  state = { data: null };
  componentDidMount() { this.fetch(this.props.id); }
}
Defensive patterns

Strategy: type-guard

Validate before calling

// dev-time audit before mounting third-party classes
const LEGACY = ['componentWillMount'];
function usesLegacyLifecycle(ctor) {
  const proto = ctor && ctor.prototype;
  if (!proto) return false;
  return LEGACY.some(
    name =>
      typeof proto[name] === 'function' &&
      proto[name].__suppressDeprecationWarning !== true,
  );
}
if (__DEV__ && usesLegacyLifecycle(LibraryWidget)) {
  console.warn('LibraryWidget ships componentWillMount - upgrade it');
}

Type guard

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

Prevention

When it happens

Trigger: In a dev build, rendering <StrictMode><LegacyClass /></StrictMode> where LegacyClass.prototype.componentWillMount is a function. Detection happens during the strict-mode remount pass; each component type is listed once.

Common situations: Adding <StrictMode> when upgrading to React 18/19 over a pre-16.3 codebase; older class-based UI libraries shipping componentWillMount; tutorial code ported forward.

Related errors

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