React 16.3 Lifecycle Methods
The React team was working asynchronous rendering for about a year, and as you know, React 16.3 was released each month. This version recommended that some life methods be used with prefix
The reason for this is to indicate that these methods are removed from use in the next major update.
The reason for the removal from use is the incorrect use of these methods in asynchronous applications.
Dan’s Twitter share featured a new React lifestyle diagram that is compatible with React 16.4. I will add what I will describe in the article with the aim of being a reference:
The new lifecycle:
static getDerivedStateFromProps(nextProps, prevState)
The new method
getDerivedStateFromProps is a static function and is used instead of
componentWillReceiveProps with React 16.3.
This method is called after a component is instantiated and when the component receives new props. Since it is a static method, you cannot access
this inside this method neither you can access any other class method. If there is no change in your values, you should return
In the example above with componentWillReceiveProps, we see that the component has updated this.setState state and that this side-effect has been updated by calling this.selectNew ()
Now let’s look at the use of
getDerivedStateFromProps for the same example. Instead of using
this.setState as in our first example, we updated the state directly. If there is no update, it returns
In some cases, we may need more than one state change when the method is called. In that case, we use
componentDidMount. Once with the execute condition, our method works immediately after calling.
One of our new methods,
getSnapshotBeforeUpdate, generally covers the workspaces of
componentWillMount. In short, the virtual DOM is used before being reflected in the DOM.
Although it is not a
static method, it is foreseen to return a value in the recommended use. This value is used as a third argument in the
In which situations is it used? The answer to the question can be used in the component updates that are re-rendered to protect the current DOM’s position when scrolling.