getDerivedStateFromProps is being added as a safer alternative to the legacy componentWillReceiveProps.
This is what the 16.3 doc says. Is there anything more to this lifecycle or is it just a name change?
getDerivedStateFromProps is not just a name change to componentWillReceiveProps. It's a static method that is called after a component is instantiated or before it receives new props, unlike componentWillReceiveProps which was not called on initial render.
Return an object to update state in response to prop changes.
Return null to indicate no change to state.
Static lifecycle methods are introduced to prevent unsafe access of instance properties.
The purpose of getDerivedStateFromProps is to only update the state based on props change and not take actions like API call or function call based on prevProps that could be done. All of these could be done in the componentDidUpdate lifecycle function which is safe because even if the change was done in componentWillReceiveProps the data would arrive after render and most often you would trigger another re-render, which could well be done in the componentDidUpdate lifecycle method.
You can refer to this RFC to understand more about why this change was made.
Related
What is the best place to make HTTP call when the component receives props in the child component?
Here is my code: https://codesandbox.io/s/sharp-keldysh-rivhz
I have Test child component. I have two option to call HTTP request when I receive new props
componentWillReceiveProps
componentDidUpdate
Where is the best place to make HTTP request? In my example I take componentDidUpdate, is that correct?
Use componentWillReceiveProps (deprecated) or it's replacement getDerivedStateFromProps
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.
it avoids unnecessary re-render, as it is called before the render method.
you can use componentDidUpdate but it'll only after run updates, which means you'll have to invoke getDerivedStateFromProps for componentDidUpdate to see those changes.
I am updating a legacy component which uses:
shouldComponentUpdate() to avoid an expensive state re-computation
componentWillUpdate() to do the re-computation and render if 1 passes
The docs say
if shouldComponentUpdate() returns false, then
UNSAFE_componentWillUpdate(), render(), and componentDidUpdate() will not be invoked`
But getDerivedStateFromProps() is not mentioned. I want to use this to replace the deprecated componentWillUpdate().
My question is: does shouldComponentUpdate() block the invocation of getDerivedStateFromProps() in the same way as it did for componentWillUpdate()?
NB: I know about looking at memoization as another solution.
When the passed props change getDerivedStateFromProps() function is called and then shouldComponentUpdate().
However if state changes only the shouldComponentUpdate() lifecycle function is triggered.
You can check the component lifecycle diagram here for more help
I started to learn ReactJS I would like to know what are the scenario to use componentWillReceiveProps? what is the purpose for using it?
Currently i'm using props without it, is there any impact ?
In cases where you want to take action in child component in response to props change, componentWillReceiveProps was supposed to the right candidate. Example of it is when you have a user component which calls and API to fetch the user details based on an ID that is provided by its parent and anytime the prop ID changes, you would want to trigger the API call again and re-render the updated view.
However, componentWillReceiveProps is called on every parent re-render and not just prop change, so while you are using it, you must provide a conditional check between previous and currentProps like
componentWillReceiveProps(nextProps) {
if(nextProps.id !== this.props.id) {
//API call goes here
}
}
However from v16 onwards, its discouraged to use componentWillReceiveProps and instead its usage is split into componentDidUpdate which is where you can make API calls and getDerivedStateFromProps or memoized functions or key updates in order to make state change based on prop change.
Please check componentWillReceiveProps vs getDerivedStateFromProps for more details
If your component accept some props and if on change of that props you would like to do some business logic or state change, componentWillReceiveProps is the lifecycle method where this logic should go, as every time props changes componentWillReceiveProps is called.
componentWillReceiveProps(nextProps) {
// Check to see if the requestRefresh prop has changed
if (nextProps.requestRefresh !== this.props.requestRefresh) {
this.setState({loading: true}, this.updateData);
}
}
As far as my understanding goes, this lifecycle hook is called when a Component's properties are updated by the parent.
This piece of code checks if the requestRefresh property is different (one to update and one that it currently has)
Now what i dont understand is this , this.updateData);
why is this with the setState method. Please help me understand
Secondly where does prevState come from and which lifecycle hook can update it
the setState method can be called with a callback as its second parameter, mainly to handle operations which need to be done when the state is fully updated.
In your example this.updateData is the callback.
setState's first argument is also a function, with the signature (prevState, props) => stateChange, this is allowing you to get access to the previous state when performing updates.
You may want to check the official doc for further details :
https://reactjs.org/docs/react-component.html#setstate
The React maintainers discourage the use of componenetWillReceiveProps.
From the React docs:
It is recommended that you use the static getDerivedStateFromProps lifecycle instead of UNSAFE_componentWillReceiveProps. Learn more about this recommendation here.
To answer your question: prevstate is the previous state, so it is the state of your component before new props are received which in turn might chnage the new state. You can also hanlde prevstate in the static getDerivedStateFromProps method:
static getDerivedStateFromProps(nextProps, prevState)
getDerivedStateFromProps is invoked after a component is instantiated as well as when it receives new props. It should return an object to update state, or null to indicate that the new props do not require any state updates.
https://facebook.github.io/react/docs/react-component.html#setstate
I have seem the official doc says :
The second parameter to setState() is an optional callback function that will be executed once setState is completed and the component is re-rendered. Generally we recommend using componentDidUpdate() for such logic instead.
why they recommend to use componentDidUpdate instead of callback when we need to use the latest state?
componentDidUpdate is also invoked immediately after every updating occurs. At this time, latest state is updated.
Putting all checking state logics in componentDidUpdate is easier for managing than many callback with every setState.
By the way if you use redux, we will not do setState in your components.
More about redux
Note: componentDidUpdate is not called for the initial render.
Learn more Component life cycle https://facebook.github.io/react/docs/react-component.html#componentdidupdate