React Component Lifecycle Old vs New

Recently React have updated its lifecycle methods, before 16.3 and then in minor change in 16.4

React Component LifeCycle

Up to React 16.3 this was the component lifecycle

But there is change in lifecycle in 16.3 then again small change in 16.4

React 16.4 Component LifeCycle

Methods Deprecated in 16.4

1. componentWillMount()
2. componentWillReceiveProps()
3. componentWillUpdate()

New Methods introduced

1. getDerivedStateFromProps()
2. getSnapshotBeforeUpdate()

Methods which are deprecated are provided with aliases methods for smooth updated.

Aliases Methods

1. componentWillMount() → UNSAFE_componentWillMount()
2. componentWillReceiveProps() → UNSAFE_componentWillReceiveProps()
3. componentWillUpdate() → UNSAFE_componentWillUpdate()

React 16.3
All old methods, aliases and new lifecycle will work.

React 16.4
All old methods, aliases and new lifecycle will work, but old methods will give deprecation warning in dev mode.

React 17.0
Only aliases and new lifecycle will work.

Note: Don’t mix old and new lifecycle in same component.

You can read on how to migrate your code from old lifecycle methods to new.

Update React Component Lifecycle

Why need to update to new LifeCycle

Firstly to get advantage of new asynchronous nature of React and further more old lifecycle methods have often been misunderstood and subtly misused.

When you call action from componentWillReceiveProps and that action do some change in store then corresponding call component’s componentWillReceiveProps, so it almost lead to infinite loop and many useless render call, until it being used carefully.

Similarly calling setState in componentWillUpdate will trigger shouldComponentUpdate and then again componentWillUpdate, which is also lead to infinite methods call, until it being used carefully.