Let's get to know React's component lifecycle.

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.

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

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 (

, , 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().