Component Lifecycle Changes in React 16.3

React 16.3 brings some changes to the component lifecycle methods, 3 of the existing component lifecycle methods will depreciate and 2 new methods are introduced.

The following life cycle methods will eventually depreciate. These methods will continue to work till React 17.0

componentWillMount — please use componentDidMount instead
componentWillUpdate — please use componentDidUpdate instead
componentWillReceiveProps — please use the new function, static getDerivedStateFromProps

The following new life cycle methods are introduced.

static getDerivedStateFromProps - This method can be used as a replacement of 'componentWillReceiveProps', since 'componentWillReceiveProps' method is removed the new method will help us to update the state based on prop changes. Notice that the function has a preceding static keyword, means it is tied to the class/component and not the instance and hence has no access to this. This function will behave like setState(), the function returns null if there are no state changes, or the part of state which needs to be updated.

In the below code snippet, visible is the state property which gets changed based on prop updates, this function will update changes to the visible state property to the components state.

static getDerivedStateFromProps(nextProps, prevState){
return {
visible : nextProps.visible
};
}

getSnapshotBeforeUpdate  - This method is called right before mutations are made (e.g. before the DOM is updated). The return value for this lifecycle will be passed as the third parameter to componentDidUpdate. (This lifecycle isn’t often needed, but can be useful in cases like manually preserving scroll position during re-rendered.)