Let's get to know React's component lifecycle.
Tags: react, component
Published: 2023-03-08 23:50:43

## Table of Contents

- Overview
- What is the React Component Lifecycle?
- Explanation of Lifecycle Methods
- Summary

## Overview
This article was put together to help me, a current React student, better understand the React lifecycle. I hope this article will be of help to others who are learning React as I am!

## What is a React Component Lifecycle?
React components have something called a lifecycle. An example that I found easy to understand in my research is "**sunrise to sunset**".
The lifecycle of a component transitions between three states: **Mounting**, **Updating**, and **Unmounting**.
Mapping these three states to the above example is shown in the table below.

| Condition   | Timeline | Description  |
|------------|----------|-----------|
| Mounting        | Before Sunrise      | When a component is instantiated and inserted into the DOM. The preparation period for rendering.       |
| Updating      | Daytime    | When components are re-rendered due to changes in props or state. The period of time during which the user can operate     |
| Unmounting      | After Sunset    | When a component is removed from the DOM.     |


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wy64zihzdhi9smmjay9v.png)

The component lifecycle provides a **lifecycle method** that can be specified for each state of the component lifecycle.

(These methods can be used in class components, but as of React v16.8, some of them can be substituted in function components using `useEffect()` in Hooks).

**Mounting**

- `constructor ()`
- `static getDrivedStateFromProps ()`
- `render ()`
- `componentDidMount ()`

**Updating**

- `getDrivedStateFromProps ()`
- `shouldComponentUpdate ()`
- `render ()`
- `getSnapshotBeforeUpdate ()`
- `componentDidUpdate ()`

**Unmounting**

- `componentWillUnmount ()`


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8k51ccyjxs0595dgi1bw.png)

## Explanation of Life Cycle Methods

This section describes the lifecycle methods introduced earlier in order of frequency of use.

 

## Frequently used lifecycle methods

`render()`

Available states: Mounting / Updating

Methods that must be defined in class components
Called each time props or state is updated
Must be a pure function: no direct manipulation of props, state, etc. in render()
Returns a single element: the entire element is enclosed in a single tag (<div>, <React. Fragment>, etc.)

`constructor()`

Available states: Mounting

First method called when mounting
Component subclass, super(props) must be called
Used when initializing this.state
Used to bind an event handler to the instance

`componentDidMount()`

Available in: Mounting

Called once just after the component is mounted (after the first render())
Use when you want to initialize the DOM (do not directly manipulate the DOM, etc.)
Used when making requests to the network, etc.
setTimeout(), etc. are done here

`componentDidUpdate()`

Available status: Updating

Called when a component is updated
Receives prevProps (previous props) as the first argument and prevState (previous state) as the second argument
The third argument may be a snapshot (return value of getSnapshotBeforeUpdate() described below).

`componentWillUnmount()`

Available states: Unmounting

Method called just before the current component is destroyed (unmounted)
Disables timers, cancels requests to the network, etc.
Can free up memory by discarding unneeded settings
render() is never called after this

## summary

It is important to keep in mind that the render() method, which is often used when dealing with React, is one of the lifecycle methods.
It is also good to understand other methods that appear frequently, such as constructor() and componentDidMount().