Lifecycle Methods of React Class Components

Basics of React

Hi All!

Today we are going to talk about lifecycles in React.js. React has two types of components which are class components and functional components. In this article, we will look at the lifecycles of class components. To the functional components, I will write another article.

Photo by Abdullah Öğük on Unsplash

So let’s get started.

At first, we should know about what is the lifecycle in a component.

very person in the world has a lifecycle. They are born, they do studies, they get a job, they get married, they retire from their job, and finally dies. So likewise our React component has a lifecycle as well. Each lifecycle has specific tasks to do for our React Application. As well as by using correct lifecycles in the correct place, we can minimize errors in our application, and also we can increase the performance of our application.

Basically, the lifecycle methods of React component can be categorized into three phases.

01. Mounting

02. Updating

03. Unmounting

According to these three phases, we can identify what order our lifecycles are executing and in which phase they were executing. Don’t worry I will show you one by one. Basically, the lifecycle methods of React component can be categorized into three phases.

Mounting

‘Mounting’ means the initial rendering of our component. It has four main lifecycle methods.

Photo by Ibrahim Boran on Unsplash
  1. constructor()
  2. static getDerivedStateFromProps()
  3. render()
  4. componentDidMount()

1. constructor()

The constructor is the very first lifecycle method that is running in the mounting phase of our component and this is running only once in the mounting phase.

A constructor has performed two tasks for us.

The first one is, it can give an initial state to our component. As well as if we are not using Arrow functions to handle events we can bind those events into the constructor.

😲 Most of the time lot of people do common mistakes in defining the constructor. Do you wanna know them?

The first one is you should call “super(props)” in the very first line in the constructor. Otherwise, you cannot access the incoming props for the component.

The second one is you should not call setState() inside the constructor. Because setState() needs to update the component. But the constructor is not run in the updating phase in the component.

2. static getDerivedStateFromProps()

This is the second lifecycle method that is running in the mounting phase of React component. This method is calling before rendering the DOM elements of the component.

If we want to assign the incoming prop values into our state, Here is the ideal place for that.

The static keyword is necessary for this method. By using this static keyword, it avoids the developer to do setState() here. Because to perform setState(), we have to use the “this” keyword. This method is static. So that we cannot use this keyword here.

3. render()

Every React class component must have this method. So in the class components, this method is compulsory. But in functional components, this method is no need.

The task of this method is to return the JSX contents to the DOM.

4. componentDidMount()

This is the final method of the Mounting phase. This method is executing immediately after the component is mounting. Like a constructor, this method is only run once and executing after the render method.

Here, we can perform some external API calls. This is the ideal place for that task. As well in this method, we can set up any subscriptions and we can do setState() if we want.

Updating

In React components, it is usually updating by changing the states and props. So those updates we can perform in this phase. This updating phase has five lifecycle methods.

  1. static getDerivedStateFromProps()
  2. shouldComponentUpdate()
  3. render()
  4. getSnapshotBeforeUpdate()
  5. componentDidUpdatde()
Photo by Jonathan Petersson on Unsplash

1. static getDerivedStateFromProps()

This method is firstly run in the mounting phase of the component. And it is run in the updating phase as well.

The task of this method is the same as what I have mentioned before in the mounting phase.

2. shouldComponentUpdate()

In our React Applications, sometimes when we update our parent component, our child component does not need to be updated. So we can get that decision by using this component.

This method returns true by default. If it returns true, that means that component needs to be updated. If the return was false, that component does not need to be updated.

As well as by using this method we can optimize the performance of our React Application.

3. render()

Again render method is running in the updating phase.

4. getSnapshotBeforeUpdate()

We can identify the task of this function by reading its name. Snapshot means the information of the DOM.

So by using this method, we can keep the information of the DOM (e.g. scrolling position in the web page) before it updates. The returned value (snapshot) of this method is passing to the next lifecycle method in this updating phase which is componentDidUpdate().

5. componentDidUpdate()

After the component is updated, this lifecycle method is called immediately. As well as the previous state and the snapshot which we are passing from the getSnapshotBeforeUpdate() can be used as a parameter to this method.

If you wish, you can call setState() here. But you cannot do it directly. If you want to call SetState() you have to wrap it inside of a condition.

Unmounting

This is the final phase of React component. Here our component will be removed from the DOM. This phase has only one lifecycle method.

Photo by engin akyurt on Unsplash

1. componentWillUnmount()

This method is the only method that is running in the Unmounting phase in the React component.

Basically what we are doing here is, clean our components. Here we can unsubscribe from the subscribed services, canceling the network connections, and undo all the things we have done in the mounting phase.

That’s it, guys! Hope you understand what are the lifecycle methods in React and what are the purposes of using those lifecycle methods in React component.

In the next article, we will discuss how the functional component performs its lifecycle hooks.

Thanks for reading!!!

See you in the next article.

LinkIT

Knowledge Sharing Program