What are Lifecycle Methods of ReactJS Component

[Sarika A]

Introduction to React JS:

React JS is a JavaScript library for creating User Interfaces, authored by Facebook and Instagram engineers. React JS is all about components. Each component lets you split the User Interface (UI) into independent, reusable pieces and allows you to think about each piece in isolation.

One of the most important features of React JS, which makes it stand out, is that it allows you to simply express how your app should look based on your data at any point of time. When data changes, React JS automatically handles all the changes in the UI without you having to deal with Document Object Model (DOM). React JS uses a fast, in-memory and lightweight representation of DOM called virtual DOM. React JS basically uses a very optimized diff algorithm that compares the virtual DOM of the current and previous state.

Component Lifecycle:

Before we dive deep into the React Component lifecycle, I would like you to think about your lifecycle and then compare both – your and React JS lifecycle. Every lifecycle signifies one important thing “CHANGE”. Everything is constantly changing over time. From the moment you’re born you start changing till your last breath. You can divide your life into parts that you can call the stages or the phases of life. Same is the case for React Component, and once you understand the similarity, it will be very easy for you to understand the React JS Component Lifecycle and its various methods during the different stages/phases.

React Component Lifecycle Methods and Benefits:

The component lifecycle methods are various methods which are invoked at different phases of the lifecycle of a component. Consider a scenario where you are creating an application in which you can allow multiple videos to run on the same page. In this case, the application will use the network to buffer videos and it will keep on consuming battery. But if you add the React Component for each video, you will be able to play/pause the video which will make sure only those videos are played which you want to watch. As a result, you will save battery as well as network usage. You can decide whether to play the video or not as you hover over, based on your choice. And you can do this with the help of React Component lifecycle methods.

So, with the use of lifecycle methods provided by the React JS, developers can produce a quality application and can really plan whats and hows at various points of birth, growth or death of user interfaces.

You can take your React JS User Interfaces to next level in short time if you combine your development skills with component lifecycle.

Phases of React Component Lifecycle

Each React Component goes through different stages of lifecycle that are called Phases in React terminology. All React Component Lifecycle methods can be split into four phases of React Component:

1. Initialization
2. Mounting
3. Updating
4. Unmounting

The process in which all these phases are involved is called the component’s lifecycle. Each and every React Component goes through the component’s lifecycle. React JS provides several methods that notify us when a certain stage of this process occurs. These methods are called the component’s lifecycle methods and they are invoked in a predictable order.

[Dianna Perry]

Lifecycle methods in ReactJS are special methods that get called at different stages of a component’s lifecycle. These methods can be categorized into three phases:

1. Mounting:

   • constructor()
   • static getDerivedStateFromProps()
   • render()
   • componentDidMount()

2. Updating:

   • static getDerivedStateFromProps()
   • shouldComponentUpdate()
   • render()
   • getSnapshotBeforeUpdate()
   • componentDidUpdate()

3. Unmounting:

   • componentWillUnmount()

These methods provide hooks into the component’s lifecycle, allowing developers to execute code at specific times.