Get Ready for React 17

These are essential to keep in mind if you are preparing to migrate your application to React 17. A great starting point is replacing the unsafe methods with these new lifecycle methods.

Following life-cycle methods will be deprecated in React v17:

• componentWillMount: componentWillMount should be removed altogether for async rendering
• componentWillReceiveProps: replace with getDerivedStateFromProps in conjunction with componentDidUpdate
• componentWillUpdate: replace with getDerivedStateFromProps in conjunction with shouldComponentUpdate

New lifecycle methods:

• getDerivedStateFromProps: This lifecycle method replaces componentWillReceiveProps and componentWillUpdate and will be called after a component is created and when it received new props. It returns an object to update state when props change or null when there is no change in state.
• getSnapshotBeforeUpdate: This handles component updates and will effectively replace componentWillUpdate and works with componentDidUpdate. It is called before any DOM updates and returns a value that is passed to componentDidUpdatewhich then handles the changes.

New React componrnt lifecycle:

• Mounting: constructor, getDrivedStateFromProps, render, reconciliation(update DOM), componentDidMount
• Updating:
  - reason: New props, setState() then getDrivedStateFromProps, shouldComponentUpdate, render, getSnapshotBeforeUpdate, reconciliation, componentDidUpdate
  - reason: forceUpdate() then getDrivedStateFromProps, render, getSnapshotBeforeUpdate, reconciliation, componentDidUpdate
• Unmounting: conponentWillUnmount

New react lifecycle