getDerivedStateFromProps does not look like the right tool for what you are trying to do. Instead use componentDidUpdate:
componentDidUpdate(prevProps) {
const { date } = this.props;
if (prevProps.date !== date) {
this.getList(date);
}
}
It's pretty rare to use getDerivedStateFromProps. For more information on when to use getDerivedStateFromProps I recommend this article
how to use getDerivedStateFromProps instead of componentWillReceiveProps in React
Exposing prevProps in getDerivedStateFromProps for persistent view animations
How to use lifecycle method getDerivedStateFromProps as opposed to componentWillReceiveProps
reactjs - react js getDerivedStateFromProps is calling continuously - Stack Overflow
Videos
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.
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:
- Do it right inside
render - 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.
Why don't you use componentDidUpdate for this? It seems to me you can achieve the result by:
/**
* @param {Props} prevProps props of the component
**/
componentDidUpdate(prevProps) {
if (prevProps.myStateVar !== this.props.myStateVar) {
this.setState({ myStateVar: this.props.myStateVar });
toggle();
}
}
getDerivedStateFromProps is run on every render. It is also a static method, so it shouldn't be called setState (or other non-static functions). In the documentation, React points out that most of the time you don't need this method to achieve state change based on prop changes here.
So first option, don't call setState, it triggers a re-render and a re-render will run getDerivedStateFromProps. Essentially an infinite re-render loop.
static getDerivedStateFromProps(props, state) {
if (props.myStateVar !== state.myStateVar) {
return {
myStateVar: props.myStateVar,
otherStateVar: [] // from toggle
}
}
// Should not be called everytime this method runs. Only when props change
// toggle() //Need to call the function each time when we get the props update
return null;
}
Your other option is memoization which is covered pretty thoroughly in that link I provided.