ReactJs v16.3 introduced significant changes in component lifecycle. There has been a few deprecations of methods as well as addition of new methods.

In this post, we will inspect the new component lifecycle methods of React v16.3+. We’ll build a music-player with React to get hands-on experience.

If you want to learn more about the component lifecycle methods of older React version(less than v16.3), then please refer to this previous post.

Tip: Use Bit to build faster with components. It helps your team share and reuse components, and use them to build new applications. Give it a try.

React spinners with Bit: Choose, Play, Install

React and it’s user interface

ReactJs is “a javascript library for building user interfaces” is the official one-liner introduction to ReactJs.

The user interface is a multi-option playground where the user can do different things, and libraries like React helps us create this playground.

The user interacts with the application by clicking, hovering, pressing a key or performing many other events on UI components. All UI components take birth in the browser and will die at some point in time.

What is lifecycle methods and why it is important?

In this galaxy, everything goes through a set of events.

In each event something takes birth, updates or dies. Trees, food and application UI component are all born, grow by taking the various forms of inputs, and at some point in time, die.

If we are aware of these lifecycle events, it will enable us to control their entire flow and it will definitely help us to produce better results.

Controlling the lifecycle means better results

Let’s assume you are a developer working on the YouTube app.

Being an awesome developers, you should make sure you are using resources like network and battery in the most efficient manner. Whenever the user switches to another application, after playing the video, you should stop/pause the buffering of the video, which will optimize resource usage.

L ifecycle methods are various methods which are invoked at different phases of the lifecycle of a component.

Deprecation of methods and introduction of static lifecycle methods

In React 16.3 few lifecycle methods have been deprecated. For now, these methods are prefixed with UNSAFE_ and will be fully removed in the next major release. Meanwhile, the existing react apps can be gradually migrated to new React lifecycle methods.

Methods like componentWillMount , componentWillReceiveProps and componentWillUpdate were heavily misused because the current instance this was available and is easy to misuse. The react team decided and removed the error-prone methods to make the whole react component lifecycle much simpler.

Seeking to improve the UX and performance of React, the team is moving towards async rendering. The motivation behind the static lifecycle method is mostly to make the methods easier and compatible with async rendering.

Watch this amazing demo by Dan Abramov on async rendering.

The methods that are deprecated are as follows:

componentWillMount

All the legacy use cases are covered in the constructor. This is renamed as UNSAFE_componentWillMount . componentWillReceiveProps

The new static method getDerivedStateFromProps is safe rewrite for this method and covers all the use cases of componentWillReceiveProps . The new name for this method is UNSAFE_componentWillReceiveProps . componentWillUpdate

The new method getSnapshotBeforeUpdate is safe rewrite for this method and covers all the use cases of componentWillUpdate .

The new name for this method is UNSAFE_componentWillUpdate .

The Phases of latest React component lifecycle

The React component which extends React.Component goes through the following phases:

Mounting

Updating

Unmounting

The following chart represents the phases and methods of React’s lifecycle.