React Lifecycle Methods

Lifecycle of React Components

What is the lifecycle of React Components?
In simple terms, you can think of the lifecycle of React components as the "lifetime" of a component, and lifecycle methods as the series of events that happened during the lifetime of that component.

Every component in React goes through a lifecycle of events,

• Mounting - Birth of your component
• Updating - Growth of your component
• Unmounting - Death of your component
• Error Handling - Checks your code so it works and is bug-free

The diagram below is from Official React Documentation showcasing the different React lifecycle methods and when they are invoked.

 
Why use it & Where do we use it?
Lifecycle methods are special methods built into React, used to operate on components throughout their duration in the DOM. React lifecycle methods are very useful in creating react applications.

Built-in lifecycle methods are accessible in React Class components. Before React 16.8, we were not able to achieve the functionality of React lifecycles methods in Functional components but after the introduction of hooks in React 16.8, we were able to achieve the functionality of componentDidMount, componentDidUpdate, and componentWillUnmount using the useEffect() hook in functional components.

Let us look at a simple Hello World example to better understand what is happening under the hood.

Consider this code for building a Greeting component in React that will print Hello World on the screen,

class Greeting extends React.Component {
    render() {
        return <h1> Hello World </h1> 
    }
}

Every component in React will have gone through its mounting, updating, and unmounting phase before rendering into the DOM.

In the Mounting phase, your component, which consists of the code is inserted into the DOM.

In the Updating phase, your component will go through the updating phase as the state orprop is changed and the component will be re-rendered again but if the state and prop remained unchanged then the component would remain as it was when it was initially created in the DOM.

Finally, In the Unmounting phase, your component will be removed from the DOM.

There’s one more phase through which your component can go i.e. Error Handling phase. This phase occurs when your code doesn't run or there’s a bug somewhere.

Note: It is not necessary that your component goes through each phase. For example, your component could go through Unmounting phase directly after mounting your component into the DOM without going through the Updating phase.

For this article, we will not be discussing how the lifecycle methods of each phase work for that you can refer to the Official React Documentation.

Lifecycle Methods

What are lifecycle methods?
Every React lifecycle phase has several lifecycle methods that you can override to run your code at particular times in the process.

In the list below, commonly used lifecycle methods are marked in bold.

Mounting

In the Mounting phase, your React component is created and inserted into the DOM.
React has four built-in methods that are called in this order when mounting a component.

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

Updating

In the Updating phase, your React component is updated or re-rendered whenever there is a change in the component’s state or prop.

React has five built-in methods that are called in this order when updating a component.

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

Unmounting

In the Unmounting phase, your React component is removed from the DOM. React has one built-in method that is called when unmounting a component.

• componentWillUnmount()

Error Handling

In the Error Handling phase, When things go bad in your code, errors will be thrown by a descendent component i.e. a component below it.

React has two built-in methods that are called when handling errors in the component.

• static getDerivedStateFromError()
• componentDidCatch()

Wrapping up!

Its been a long discussion on the topic of lifecycle methods in React. In this article we have tried to understand what are lifecycle methods in React, how can we use them, and how many lifecycles are there for a React component.

I hope this tutorial helped you gain a better understanding of what React lifecycle methods are. If you find this article helpful like and share it with your friends.

💻 Happy Coding!

Moazam AliFollow

Frontend Developer who is always passionate in discovering new stuff and building networks.