getDerivedStateFromProps is not a direct alternative to componentWillReceiveProps, purely because of the fact that its called after every update, whether its the change in state or change in props or re-render of parent.

However whatever is the case, simply returning the state from getDerivedStateFromProps is not the right way, you need to compare the state and props before returning the value. Else with every update the state is getting reset to props and the cycle continues

As per the docs

getDerivedStateFromProps is invoked right before calling the render method, both on the initial mount and on subsequent updates. It should return an object to update the state, or null to update nothing.

This method exists for rare use cases where the state depends on changes in props over time. For example, it might be handy for implementing a <Transition> component that compares its previous and next children to decide which of them to animate in and out.

Deriving state leads to verbose code and makes your components difficult to think about. Make sure you’re familiar with simpler alternatives:

If you need to perform a side effect (for example, data fetching or an animation) in response to a change in props, use componentDidUpdate lifecycle instead.

If you want to re-compute some data only when a prop changes, use a memoization helper instead.

If you want to “reset” some state when a prop changes, consider either making a component fully controlled or fully uncontrolled with a key instead.

P.S. Note that the arguments to getDerivedStateFromProps are props and state and not nextProps and prevProps

To get into more details,

In order to make changes based on props change, we need to store prevPropsState in state, in order to detect changes. A typical implementation would look like

static getDerivedStateFromProps(props, state) {
    // Note we need to store prevPropsState to detect changes.
    if (
      props.myPropsState !== state.prevPropsState
    ) {
      return {
        prevPropsState: state.myState,
        myState: props.myPropsState
      };
    }
    return null;
  }
Answer from Shubham Khatri on Stack Overflow
Top answer
1 of 3
7

getDerivedStateFromProps is not a direct alternative to componentWillReceiveProps, purely because of the fact that its called after every update, whether its the change in state or change in props or re-render of parent.

However whatever is the case, simply returning the state from getDerivedStateFromProps is not the right way, you need to compare the state and props before returning the value. Else with every update the state is getting reset to props and the cycle continues

As per the docs

getDerivedStateFromProps is invoked right before calling the render method, both on the initial mount and on subsequent updates. It should return an object to update the state, or null to update nothing.

This method exists for rare use cases where the state depends on changes in props over time. For example, it might be handy for implementing a <Transition> component that compares its previous and next children to decide which of them to animate in and out.

Deriving state leads to verbose code and makes your components difficult to think about. Make sure you’re familiar with simpler alternatives:

If you need to perform a side effect (for example, data fetching or an animation) in response to a change in props, use componentDidUpdate lifecycle instead.

If you want to re-compute some data only when a prop changes, use a memoization helper instead.

If you want to “reset” some state when a prop changes, consider either making a component fully controlled or fully uncontrolled with a key instead.

P.S. Note that the arguments to getDerivedStateFromProps are props and state and not nextProps and prevProps

To get into more details,

In order to make changes based on props change, we need to store prevPropsState in state, in order to detect changes. A typical implementation would look like

static getDerivedStateFromProps(props, state) {
    // Note we need to store prevPropsState to detect changes.
    if (
      props.myPropsState !== state.prevPropsState
    ) {
      return {
        prevPropsState: state.myState,
        myState: props.myPropsState
      };
    }
    return null;
  }
2 of 3
1

Finally, I resolved my issue. It was a painful debugging:

// Child Component

// instead of this
// this.props.onMyDisptach([...myPropsState])

// dispatching true value since myPropsState contains only numbers
this.props.onMyDispatch([...myPropsState, true])

This is because, I have two conditions: 1) on checkbox change (component) 2) on reset button pressed (child component)

I was needing to reset the states when reset button is pressed. So, while dispatching state to the props for reset button, I used a boolean value to know it's a change from the reset. You may use anything you like but need to track that.

Now, here in the component, I found some hints to the differences between componentWillReceiveProps and getDerivedStateFromProps after debugging the console output.

// Component
static getDerivedStateFromProps(props, state) {
    const { myPropsState: myState } = props
    // if reset button is pressed
    const true_myState = myState.some(id=>id===true)
    // need to remove true value in the store
    const filtered_myState = myState.filter(id=>id!==true)
    if(true_myState) {
      // we need to dispatch the changes to apply on its child component
      // before we return the correct state
      props.onMyDispatch([...filtered_myState])
      return {
        myState: filtered_myState
      }
    }
    // obviously, we need to return null if no condition matches
    return null
  }

Here's what I found the results of the console output:

  • getDerivedStateFromProps logs immediately whenever props changes

  • componentWillReceiveProps logs only after child propagates props changes

  • getDerivedStateFromProps doesn't respond to the props changes ( I meant for the dispatch changes as in the example code)

  • componentWillReceiveProps responds to the props changes

  • Thus, we needed to supply the changes to child component while using getDerivedStateFromProps.

The process of pasting true value in the state I require because getDerivedStateFromProps handle all the changes unlike componentWillReceiveProps handles only the child component dispatches the changes to the props.

By the way, you may use custom property to check if it is changed and update the value if getDerivedStateFromProps but for some reason I have to tweak this technique.

There might be some confusion on my wording but I hope you'll get it.

🌐
React
legacy.reactjs.org › docs › react-component.html
React.Component – React
If you’d like, you can reuse some code between getDerivedStateFromProps() and the other class methods by extracting pure functions of the component props and state outside the class definition. Note that this method is fired on every render, regardless of the cause. This is in contrast to UNSAFE_componentWillReceiveProps, which only fires when the parent causes a re-render and not as a result of a local setState.
Discussions

how to use getDerivedStateFromProps instead of componentWillReceiveProps in React
I like to update my code to use getDerivedStateFromProps instead of componentWillReceiveProps as the I am receiving deprecated error. The component is receiving a date prop and every time the date is More on stackoverflow.com
🌐 stackoverflow.com
Newest 'getderivedstatefromprops' Questions - Stack Overflow
React documentation seems to be very insistent on the idea that in almost every situation, deriving state from props is a bad idea, an anti-pattern, verbose, likely to cause bugs, hard to understand, ... ... I like to update my code to use getDerivedStateFromProps instead of componentWillReceiveProps ... More on stackoverflow.com
🌐 stackoverflow.com
reactjs - componentWillRecieveProps vs getDerivedStateFromProps - Stack Overflow
componentWillRecieveProps is deprecated and getDerivedStateFromProps is being advocated to use. But componentWillRecieveProps gets called when the props get changed but getDerivedStateFromProps is More on stackoverflow.com
🌐 stackoverflow.com
How to use lifecycle method getDerivedStateFromProps as opposed to componentWillReceiveProps
If it's not needed in vast majority ... break thousands of working projects. Looks like React team started over engineering. 2018-06-28T10:49:06.623Z+00:00 ... Change from componentWillReceiveProps to getDerivedStateFromProps.... More on stackoverflow.com
🌐 stackoverflow.com
🌐
GitHub
github.com › reactjs › react.dev › issues › 721
Discussion: componentWillReceiveProps vs getDerivedStateFromProps · Issue #721 · reactjs/react.dev
March 28, 2018 - componentWillReceiveProps(newProps){ if (this.props.visible === true && newProps.visible === false) { registerLog('dialog is hidden'); } } ... static getDerivedStateFromProps(nextProps, prevState){ if (this.state.visible === true && newProps.visible === false) { registerLog('dialog is hidden'); } return { visible : nextProps.visible }; }
Author   arieh
🌐
React
react.dev › reference › react › Component
Component – React
static getDerivedStateFromProps return an object to update the state, or null to update nothing. This method is fired on every render, regardless of the cause. This is different from UNSAFE_componentWillReceiveProps, which only fires when the parent causes a re-render and not as a result of a local setState...
🌐
React
legacy.reactjs.org › blog › 2018 › 06 › 07 › you-probably-dont-need-derived-state.html
You Probably Don't Need Derived State – React Blog
June 7, 2018 - A common misconception is that getDerivedStateFromProps and componentWillReceiveProps are only called when props “change”. These lifecycles are called any time a parent component rerenders, regardless of whether the props are “different” from before. Because of this, it has always been unsafe to unconditionally override state using either of these lifecycles.
🌐
DigitalOcean
digitalocean.com › community › tutorials › react-get-derived-state
Using Derived State in React | DigitalOcean
July 1, 2018 - It’s important to move your components to this new method, as componentWillReceiveProps will soon be deprecated in an upcoming version of React. Just like componentWillReceiveProps, getDerivedStateFromProps is invoked whenever a component receives new props.
Find elsewhere
🌐
Medium
medium.com › swlh › lifecycle-state-and-getderivedstatefromprops-761b3a19c4e
Lifecycle, state, getDerivedStateFromProps and Hooks | by Thomas Rubattel | The Startup | Medium | The Startup
December 17, 2022 - React 16.3 introduced a new lifecycle function called getDerivedStateFromProps. This new lifecycle function is meant as replacement to componentWillReceiveProps which is unsafe for async rendering when misused.
🌐
Stack Overflow
stackoverflow.com › questions › tagged › getderivedstatefromprops
Newest 'getderivedstatefromprops' Questions - Stack Overflow
React documentation seems to be very insistent on the idea that in almost every situation, deriving state from props is a bad idea, an anti-pattern, verbose, likely to cause bugs, hard to understand, ... ... I like to update my code to use getDerivedStateFromProps instead of componentWillReceiveProps as the I am receiving deprecated error.
🌐
Medium
medium.com › hackernoon › replacing-componentwillreceiveprops-with-getderivedstatefromprops-c3956f7ce607
Replacing ‘componentWillReceiveProps’ with ‘getDerivedStateFromProps’ | by Amanshu Kataria | HackerNoon.com | Medium
January 19, 2021 - Since it is a static method, you cannot access this inside this method neither you can access any other class method. Unlike componentWillReceiveProps you cannot set state inside this method, so the only way to update state is returning an object.
🌐
GeeksforGeeks
geeksforgeeks.org › reactjs › what-are-the-alternatives-to-componentwillreceiveprops-in-react
What Are The Alternatives To componentWillReceiveProps In React? - GeeksforGeeks
July 23, 2025 - In React, componentWillReceiveProps is a lifecycle method that was deprecated in version 16.3 and subsequently removed in version 17. To handle similar logic, you can use alternative lifecycle methods and hooks that are recommended in modern React development. This article will explore the recommended alternatives: getDerivedStateFromProps, componentDidUpdate, and hooks like useEffect.
🌐
egghead.io
egghead.io › lessons › react-refactor-componentwillreceiveprops-to-getderivedstatefromprops-in-react-16-3
Refactor componentWillReceiveProps() to getDerivedStateFromProps() in React 16.3 | egghead.io
To refactor this component away from componentWillReceiveProps, I'll have to split its functionality into two lifecycle methods. One, getDerivedStateFromProps, and two, componentDidUpdate. [01:45] As of React 16.3, the new lifecycle method getDerivedStateFromProps was written to help with some of the new acing features they're trying to introduce in future React versions.
Published   April 19, 2018
🌐
Rheinwerk Computing
blog.rheinwerk-computing.com › the-component-lifecycle-in-react
The Component Lifecycle in React
March 19, 2025 - The static getDerivedStateFromProps method is called on each change. This method replaces the componentWillReceiveProps method and is rarely used. The method is used to determine if the props have changed and if the state needs to be adjusted.
🌐
DhiWise
dhiwise.com › post › best-practices-for-using-getderivedstatefromprops-in-your-react-applications
The Role of getDerivedStateFromProps in the React
October 27, 2023 - The transformData method is used to transform the data prop into the derivedData state. The getDerivedStateFromProps method updates the derivedData state whenever the data prop changes. Props in React are used to pass data from parent components ...
🌐
HackerNoon
hackernoon.com › replacing-componentwillreceiveprops-with-getderivedstatefromprops-c3956f7ce607
Replacing ‘componentWillReceiveProps’ with ‘getDerivedStateFromProps’ | HackerNoon
May 13, 2018 - With the release of React 16.3, some new lifecycle methods have been introduced, and release of React 17 will deprecate some lifecycle method.
🌐
Larry-price
larry-price.com › blog › 2018 › 06 › 27 › how-to-use-getderivedstatefromprops-in-react-16-dot-3-plus
How to Use getDerivedStateFromProps in React 16.3+ - Larry Price
As opposed to getDerivedStateFromProps, we have access to the context provided by this. Note that this method also has arguments for prevProps and prevState, which provides the previous versions of the component’s props and state for comparison to the current values. The deprecation of these lifecycle methods won’t happen until React 17, but it’s always good to plan ahead.
Top answer
1 of 4
119

About the removal of componentWillReceiveProps: you should be able to handle its uses with a combination of getDerivedStateFromProps and componentDidUpdate, see the React blog post for example migrations. And yes, the object returned by getDerivedStateFromProps updates the state similarly to an object passed to setState.

In case you really need the old value of a prop, you can always cache it in your state with something like this:

state = {
  cachedSomeProp: null
  // ... rest of initial state
};

static getDerivedStateFromProps(nextProps, prevState) {
  // do things with nextProps.someProp and prevState.cachedSomeProp
  return {
    cachedSomeProp: nextProps.someProp,
    // ... other derived state properties
  };
}

Anything that doesn't affect the state can be put in componentDidUpdate, and there's even a getSnapshotBeforeUpdate for very low-level stuff.

UPDATE: To get a feel for the new (and old) lifecycle methods, the react-lifecycle-visualizer package may be helpful.

2 of 4
63

As we recently posted on the React blog, in the vast majority of cases you don't need getDerivedStateFromProps at all.

If you just want to compute some derived data, either:

  1. Do it right inside render
  2. Or, if re-calculating it is expensive, use a memoization helper like memoize-one.

Here's the simplest "after" example:

import memoize from "memoize-one";

class ExampleComponent extends React.Component {
  getDerivedData = memoize(computeDerivedState);

  render() {
    const derivedData = this.getDerivedData(this.props.someValue);
    // ...
  }
}

Check out this section of the blog post to learn more.

🌐
DhiWise
dhiwise.com › post › how-does-componentwillreceiveprops-work-in-react
componentWillReceiveProps in React
November 21, 2024 - The new lifecycle methods, such as getDerivedStateFromProps and getSnapshotBeforeUpdate, offer more predictable and safer ways to handle updates. To migrate from componentWillReceiveProps, use the new getDerivedStateFromProps method.
🌐
codelessgenie
codelessgenie.com › blog › how-to-use-lifecycle-method-getderivedstatefromprops-as-opposed-to-componentwillreceiveprops
Replacing componentWillReceiveProps with getDerivedStateFromProps in React: How to Compare Props and Update State — CodeLessGenie.com
However, its flexibility came with risks—like unintended side effects, stale data, and unpredictable behavior. getDerivedStateFromProps addresses these issues by enforcing a stricter, more predictable pattern for deriving state from props.