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 from componentWillMount to componentDidMount (preferred in most cases) or the constructor.

Please update the following components: %s

What it means

The Fizz SSR renderer (react-server) still invokes componentWillMount during mountClassInstance via callComponentWillMount (ReactFizzClassComponent.js:693) for pre-16.3 compatibility. In dev it warns once per component name unless the method carries __suppressDeprecationWarning. The warning is stronger here than on the client: SSR may render and discard output (suspense aborts, backpressure), so side effects in componentWillMount can execute for markup that is never sent.

Source

Thrown at packages/react-server/src/ReactFizzClassComponent.js:553

      console.error(
        '%s.getChildContext(): childContextTypes must be defined in order to ' +
          'use getChildContext().',
        name,
      );
    }
  }
}

function callComponentWillMount(type: any, instance: any) {
  const oldState = instance.state;

  if (typeof instance.componentWillMount === 'function') {
    if (__DEV__) {
      if (instance.componentWillMount.__suppressDeprecationWarning !== true) {
        const componentName = getComponentNameFromType(type) || 'Unknown';

        if (!didWarnAboutDeprecatedWillMount[componentName]) {
          console.warn(
            // keep this warning in sync with ReactStrictModeWarning.js
            'componentWillMount has been renamed, and is not recommended for use. ' +
              'See https://react.dev/link/unsafe-component-lifecycles for details.\n\n' +
              '* Move code from componentWillMount to componentDidMount (preferred in most cases) ' +
              'or the constructor.\n' +
              '\nPlease update the following components: %s',
            componentName,
          );
          didWarnAboutDeprecatedWillMount[componentName] = true;
        }
      }
    }

    instance.componentWillMount();
  }
  if (typeof instance.UNSAFE_componentWillMount === 'function') {
    instance.UNSAFE_componentWillMount();
  }

View on GitHub (pinned to eafeac097b)

Solutions

  1. Move client-side effects to componentDidMount (it does not run during SSR) and derive initial state in the constructor
  2. If the logic must run on the server, do it in the constructor or before render - not in a lifecycle React may call twice
  3. Run `npx react-codemod rename-unsafe-lifecycles` for components you cannot refactor yet

Example fix

// before
class Example extends React.Component {
  componentWillMount() { log('rendering on server'); this.setState({x: 1}); }
}

// after
class Example extends React.Component {
  constructor(props) { super(props); this.state = {x: 1}; }
  componentDidMount() { log('mounted on client'); }
}
Defensive patterns

Strategy: validation

Validate before calling

// reject class trees that SSR cannot render safely
function isSsrSafeClass(ctor) {
  const m = ctor && ctor.prototype && ctor.prototype.componentWillMount;
  return !(typeof m === 'function' && m.__suppressDeprecationWarning !== true);
}

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: renderToPipeableStream/renderToReadableStream, in a dev build, renders a class component whose prototype defines componentWillMount as a function.

Common situations: Legacy class trees being server-rendered for the first time; adding SSR to an old app during a framework migration; class components shared between client and RSC-adjacent server rendering.

Related errors


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