facebook/react · warning

componentWillReceiveProps has been renamed, and is not recom

Error message

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

* Move data fetching code or side effects to componentDidUpdate.
* 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
* 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.

Please update the following components: %s

What it means

StrictMode counterpart of the componentWillMount warning, listing components that define componentWillReceiveProps without UNSAFE_ (ReactStrictModeWarnings.js:252). The method runs on every parent re-render and can fire multiple times per commit, which breaks under concurrent rendering and makes it the classic source of derived-state bugs. React points you to componentDidUpdate, getDerivedStateFromProps, or memoization.

Source

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

      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(
        '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);

View on GitHub (pinned to eafeac097b)

Solutions

  1. If it derives state from props, replace with static getDerivedStateFromProps or memoization (compute during render instead of storing)
  2. If it fetches or runs effects, move the logic to componentDidUpdate with a prop-comparison guard
  3. Run `npx react-codemod rename-unsafe-lifecycles` to rename to UNSAFE_componentWillReceiveProps as a stopgap
  4. Upgrade third-party libraries still shipping the un-prefixed method

Example fix

// before
componentWillReceiveProps(nextProps) {
  if (nextProps.userId !== this.props.userId) this.setState({data: null});
}

// after
static getDerivedStateFromProps(props, state) {
  if (props.userId !== state.prevUserId) return {prevUserId: props.userId, data: null};
  return null;
}
Defensive patterns

Strategy: type-guard

Validate before calling

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

Type guard

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

Prevention

When it happens

Trigger: Dev build, <StrictMode> around a class component whose prototype defines componentWillReceiveProps as a function without the __suppressDeprecationWarning marker. Flushed once with all offending component names.

Common situations: Pre-16.3 class codebases resetting state when props change; syncing prop values into state inside componentWillReceiveProps; old versions of libraries like early react-virtualized or draft-js patterns.

Related errors

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