Why getDerivedStateFromProps is called after setState?

Question

React introduced new static method getDerivedStateFromProps(props, state) which is called before every render method, but why? Calling it after prop change makes sense to me but after setState it doesn't, maybe I am missing something.

I was creating a datePicker Component according to my company requirement, in the component date is controlled from the prop. I have the following state in the component.

selectedDate: number; selectedMonth: number; selectedYear: number; currentMonth: number; currentYear: number; view: string; 

selected represents selected date which is derived from date prop and currentMonth and currentYear represents month and year in the current calendar view.

If date from prop changes selected*, currentMonth and currentYear should be changed accordingly. For that, I am using getDerivedStateFromProps but let say user clicks on Month name which will switch calendar view to month (instead of dates name of the month will be shown), the function updates the currentMonth for this using setState, but date the prop is same as before (containing previous month) which should, but getDerivedStateFromProps is called and currentMonth is again as same as before instead of changing.

Right I creating an extra variable in state to track if getDerivedStateFromProps is called due to setState but I don't think that's the right way.

Either I am doing something wrong or missing something or getDerivedStateFromProps should not be called after setState. Probably I am doing something wrong.

Answer 1

The way getDerivedStateFromProps hook works whenever the new props, setState, and forceUpdate is being received.

In the version of 16.3, React is not affecting getDerivedStateFromProps whenever the setState is being used. But they improved it in the version starting with 16.4, so whenever the setState is being called the getDerivedStateFromProps is being hooked.

Here's extracted image from React lifecycle diagram:

16.3

^16.4

---

So, it's up to you when to hook the getDerivedStateFromProps by checking props and states properly. Here's an example:

static getDerivedStateFromProps (props, state) {   // check your condition when it should run?   if(props.currentMonth != state.currentMonth) {     return {       currentMonth: state.currentMonth     }   }   // otherwise, don't do anything   else {    return null   } }