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.