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.
Answer from Oblosys on Stack OverflowHow to use lifecycle method getDerivedStateFromProps as opposed to componentWillReceiveProps
Discussion: componentWillReceiveProps vs getDerivedStateFromProps
how to use getDerivedStateFromProps instead of componentWillReceiveProps in React
How does `static getDerivedStateFromProps` work?
React always knows exactly what component instance it's currently rendering. But, in order to prevent potentially problematic usage patterns, yes, the getDerivedStateFromProps lifecycle method must be defined as static, so you cannot reference this inside. You're supposed to only look at the (latestProps, latestState) parameters, and determine what state updates if any are needed.
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.
I've been nailing myself on this, but as far as my knowledge goes, static methods can't access any instance, yet I see that this specific one, getDerivedStateFromProps, either returns the state so it can modify the state of your component, or null, if no changes are wanted.
So in order to sleep well tonight, I need to know how does this method access the instance in order to change the state?
React always knows exactly what component instance it's currently rendering. But, in order to prevent potentially problematic usage patterns, yes, the getDerivedStateFromProps lifecycle method must be defined as static, so you cannot reference this inside. You're supposed to only look at the (latestProps, latestState) parameters, and determine what state updates if any are needed.
The React internals call the static method at the same time they are updating the instance.
Something like this:
instance.props = newProps;
instance.setState(
TheClass.getDerviedStateFromProps(newProps)
);The method does not access the instance. The React internals do.