This blog post is for the React version less than 16.3.In React v16.3 there has been significant changes in component lifecycle methods. If you are using React greater than 16.3 please refer the following blog post.

Understanding React v16.4+ New Component Lifecycle Methods_A hands-on guide to React’s new component lifecycle methods; build a simple music player!_blog.bitsrc.io

React and it’s user interface

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

What is User Interface?

The user interacts with application by clicking, hovering, pressing a key or performing many other events on UI components. All UI components take birth in the browser and would die at some point of time. The whole interface is governed by one God, that is the user.

The user interface is a multi option playground where the user can do anything and libraries like ReactJs helps us creating that playground.

What is lifecycle methods and why it is important?

Around us everything goes through a cycle of taking birth, growing and at some point of time it will die. Consider trees, any software application, yourself, a div container or UI component in a web browser, each of these takes birth, grows by getting updates and dies.

The lifecycle methods are various methods which are invoked at different phases of the lifecycle of a component. Suppose if we are creating the YouTube app, then obviously our app will use the network to buffer the videos and it spends the battery power (let’s assume only these two).If the user switches to another application after playing the video, then being the awesome developers, we should make sure we are using the resources like network and battery in the most efficient manner. Whenever the user switches to another application, we can stop/pause the buffering of the video, which will stop using the network and battery.

This is what the lifecycle methods in ReactJs provide us, so that the developer can produce a quality application and make sure the developer can really plan what and how to do at various points of birth, growth or death of UI interfaces.

Having a great understanding about the component lifecycle would excel your ability to develop quality ReactJs user interfaces.

Four phases of a React component

The React component, like anything else in the world, goes through the following phases

The following image is the visual representation of the phases and the methods of ReactJs lifecycle.

ReactJs lifecycle phases and methods

To visualize the implementation of these lifecycle hooks we will create a music player React app named Contra music player. Let’s start our discussion on these phases.

1) Initialization

In this phase the React component prepares for the upcoming tough journey, by setting up the initial states and default props, if any.

Contra Music player app’s initializations would look like

The component is setting up the initial state in the constructor, which can be changed later by using thesetState method.

The defaultProps is defined as a property of Component to define all the default value of props, which can be overridden with new prop values.

By rendering like<ContraMusicPlayer/> Contra Music player will start with volume 70% in paused state with dark theme.

By rendering like <ContraMusicPlayer theme="light"/> Contra Music player will start with volume 70% in paused state with light theme.

2) Mounting

After preparing with basic needs, state and props, our React Component is ready to mount in the browser DOM. This phase gives hook methods for before and after mounting of components. The methods which gets called in this phase are

The render method for our music player may look like this

The following example shows the setup of highcharts when the DOM is ready

Where should you make the API calls?

The API calls should be made in componentDidMount method always.

Where to integrate API calls in ReactJs? — componentWillMount vs componentDidMount_Every React application which wants to fetch data or send data to the server needs to integrate APIs._hackernoon.com

Please refer the above blog post to know more about integrating API calls.

3) Update

This phase starts when the react component has taken birth on the browser and grows by receiving new updates. The component can be updated by two ways, sending new props or updating the state.

Let’s see the list of hook methods when the current state is updated by calling setState

This method is generally used when rendering is a very heavy method, then you should avoid render every now and then. For example, suppose for every render, the component generates thousand prime numbers, let’s consider some app has this kind of logic, then we can control when it is required then only the component is rendered.

The list of methods that will get called when the parent sends new props are as follows:

The rest of the methods behave exactly same defined above, in terms of state as well.

4) Unmounting

In this phase, the component is not needed and the component will get unmounted from the DOM. The method which is called in this phase

Do let me know your thoughts in comment section. And if this article helped you, then you can buy me a coffee 😊