React Lifecycle Methods
Tags: react, javascript, beginners, tutorial
Published: 2022-10-06 11:57:26

## 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](https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/) showcasing the different React lifecycle methods and when they are invoked.


![React Lifecycle Methods Diagram](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wk0effjedq1prfq7pl1d.png)


&nbsp;
_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,

```react
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` or` prop` 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](https://reactjs.org/docs/react-component.html)._

&nbsp;
## 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**.


![Lifecycle phases of a React Component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/06u0kdw56tfcxlnb2316.png)

### 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()`


&nbsp;
## 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!

---

{% user moazamdev %}