Understanding React-Component Life Cycle

It is a known fact that React web apps is a collection of several independent components which will exhibit their behavior according to the interactions made with them. Behind the scenes, every react component has a life cycle of its own which can be described as a series of steps that takes place whenever a component is invoked. Before we check out each stage, here is an update on the deprecated methods. Please refer here.

As it is said, “A picture is worth a thousand words”, Let’s checkout the below image for a better understanding.

React Component Life-Cycle

From the above image, we can depict that a React Component can go through four stages of its life as follows:

Initialization: In this stage, the component is constructed with the help of a constructor in which the given props and default state are set. Below snippet explains the same.

import React,{Component} from 'react';
import Home from './components/HomePage'
import './App.css';
class App extends Component {
//Constructor is called for initialization
constructor(props){
super(props)
this.state={
value:0
}
this.setNewValue= this.setNewValue.bind(this)
}
}

Mounting: As the name defines by itself, the React component is mounted on the DOM. This is the phase where the component renders for the first time after the initialization stage is completed. Following are the methods available in this phase:

1. componentWillMount: This method is called before the component is mounted on the DOM . This means that this method is executed just before the render is invoked for the first time. As seen in the below image, this method is invoked before the render is called.(Observed in the Console)

2. componentDidMount: This method is called after the component is mounted on the DOM. This means that this method is executed just after the render is invoked for the first time.

Updation: It is very easy to create active web pages using React JS. Whenever a user triggers any action in a web page, a dynamic response is delivered. This is where, the updation stage comes into the picture. (i.e) the state and the props of a component gets updated as per the user actions such as clicking or submitting via a button. Following are the methods involved in this stage:

1. componentWillRecieveProps: This method is called before the mounted component gets its props reassigned. Different set of props are passed to this method.
2. componentWillUpdate: Before the component gets re-rendered, this method is called. That is, after the updation of the state or props and before the render method is invoked, componentWillUpdate is called.
3. componentDidUpdate: After the updation of the state or props and after the successful re-rendering of the component, this method is invoked.

Here is a snapshot of the events happening whenever an action is triggered by the end-user:

In the above image, whenever the user hits the “MULTIPLY BY 5” button, the order of events occurring are :(observed in the console)

• componentWillRecieveProps
• componentWillUpdate
• componentDidUpdate

Unmounting: As it is understood from the name itself, during this phase, the component gets unmounted from DOM. Following is the method available in this stage:

componentWillUnmount: This method is invoked before the component gets unmounted from DOM.

That is all !!! We have discussed all the stages involved whenever a component is invoked. Here is the repository for the example used in this article.

We shall discuss on how to deploy the same application in Heroku and dockerize the same in next article!!!

Do visit my YouTube channel and subscribe for interesting tech videos!🔄