How to fix Warning: componentWillReceiveProps has been renamed, and is not recommended for use. in React

Check the console warnings to see which components are triggering the warning. The warning message will typically include the component name. You can also search your codebase:

grep -r "componentWillReceiveProps" src/

Or use your IDE's search feature to find all occurrences.

React provides an automated codemod script that renames all deprecated lifecycle methods to their UNSAFE_ versions:

npx react-codemod rename-unsafe-lifecycles

This will scan your project and automatically rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps. This is a quick fix that suppresses the warning in non-strict mode, but is not the recommended long-term solution.

If your componentWillReceiveProps performs side effects like data fetching, API calls, or subscriptions, move them to componentDidUpdate:

// Before
componentWillReceiveProps(nextProps) {
  if (nextProps.userId !== this.props.userId) {
    this.fetchUserData(nextProps.userId);
  }
}

// After
componentDidUpdate(prevProps) {
  if (this.props.userId !== prevProps.userId) {
    this.fetchUserData(this.props.userId);
  }
}

Note the logic reversal: componentDidUpdate receives previous props, while componentWillReceiveProps received next props.

If you're using componentWillReceiveProps to derive state from props, migrate to the static getDerivedStateFromProps method:

// Before
componentWillReceiveProps(nextProps) {
  if (nextProps.value !== this.props.value) {
    this.setState({ controlledValue: nextProps.value });
  }
}

// After
static getDerivedStateFromProps(props, state) {
  if (props.value !== state.controlledValue) {
    return { controlledValue: props.value };
  }
  return null;
}

Important: getDerivedStateFromProps is static, so you cannot access this. Return an object to update state, or null for no updates.

If you were using componentWillReceiveProps to reset component state when props change, consider making the component fully controlled or use a key prop to reset it:

// Parent component
<MyComponent key={userId} userId={userId} />

Changing the key forces React to unmount and remount the component with fresh state, eliminating the need for lifecycle-based state synchronization.

If you were computing values from props in componentWillReceiveProps, consider computing them during render with useMemo (if using hooks) or memoization libraries:

// Functional component with hooks
const expensiveValue = useMemo(() => {
  return computeExpensiveValue(props.data);
}, [props.data]);

For class components, compute during render and cache in instance variables if needed.

If warnings come from third-party libraries, check for updated versions:

npm outdated
npm update react-select react-dates

Many popular libraries have released updates that eliminate these warnings. Check the library's changelog or GitHub issues for migration guidance.

After refactoring, verify that your components behave correctly:

npm test
npm run build

Pay special attention to:
- Components that derive state from props
- Side effects triggered by prop changes
- Performance-sensitive components
- Edge cases where props change rapidly