Introduction

React lifecycle methods, are the favorite topic of interviewers when it comes to react js interviews. But most of us are generally a lot confused about the lifecycle methods, but no more. In this blog, I have covered all the lifecycle methods quickly and crisply for that end-minute preparation.

What are lifecycle methods?

React components go through a series of phases during their existence, each marked by specific lifecycle methods. These phases are categorized into three main stages: Mounting, Updating, and Unmounting.

Let's delve into each of these stages and explore the key lifecycle methods associated with them.

Lifecycle methods

Mounting Phase

The mounting phase has four lifecycle methods:

1. constructor()

2. render()

3. getDerivedStateFromProps()

4. componentDidMount()

Let's discuss about each of them.

constructor()

The constructor method is the first to be executed when a component is created. It is basically used to initialize the state of the component.

render()

The render method is responsible for creating the virtual DOM representation of the component. It defines what should be displayed on the UI.

getDerivedStateFromProps()

This method is only available after React version 16.3

This method is called after the constructor and before the render method. It allows the component to update its state based on the changes in the props.

componentDidMount()

This method is called once the component is mounted. This method manages the API calls and performs any DOM operations if needed.

Updating Phase

The updating phase has four methods :

1. shouldComponentUpdate()

2. componentWillUpdate()

3. componentDidUpdate()

4. getSnapshotBeforeUpdate()

   

Let's discuss each of them one by one.

shouldComponentUpdate()

This method is called before the updation of a component. This method returns a boolean value that determines if the component should be updated or not.

componentWillUpdate(nextProps)

This method is called just before the updation of the component. This method accepts the nextProps as an argument and enables us to perform necessary actions just before the update.

componentDidUpdate(prevProps , prevState)

componentDidUpdate() runs after the component is updated and re-rendered. It is useful for performing additional operations on the component. After React 16.3, it accepts prevProps and prevState for comparison.

getSnapshotBeforeUpdate()

This method is used to get information about the current state of a UI before an update.

Unmounting Phase

The unmounting phase has only one method called componentWillUnmount.

This method is evoked just before unmounting a component providing an opportunity to perform clean up and clean necessary actions.

Summary

To summarize all the phases and methods in each phase you can refer to the below diagram.

I hope this blog helps you understand the concept of React lifecycle methods. If you have any doubts feel free to connect with me on my socials.

Thank you.