There are two new lifecycle methods introduced in React 16.3. Their main TASK is replacing the old error-prone lifecycle methods like componentWillUpdate and componentWillReceiveProps. You can still use these old lifecycle methods in your project but only till React 17 is released. These old lifecycle methods are now called - UNSAFE_componentWillUpdate and UNSAFE_componentWillReceiveProps.

static getDerivedStateFromProps(nextProps, prevState)
This lifecycle method is invoked before calling render(), both on the initial mount and subsequent MOUNTS. It’s main job is replacing componentWillReceiveProps which is now called UNSAFE_componentWillReceiveProps.

getSnapshotBeforeUpdate(prevProps, prevState)
This lifecycle method is called right before the changes from VDOM are to be committed to the REAL DOM. It enables your component to capture some INFORMATION from the DOM like mouse position before it is changed. The returned value by this lifecycle will be passed as a parameter to componentDidUpdate().

So, the new ORDER of mounting is -

• constructor()
• static getDerivedStateFromProps()
• render()
• componentDidMount()

The order of update caused by changes in any props or state is -

• static getDerivedStateFromProps()
• shouldComponentUpdate()
• render()
• getSnapshotBeforeUpdate()
• componentDidUpdate()