[React] About the lifecycle.

What is the React Lifecycle?

Components have a concept called a life cycle.

Due to the nature of React, components are re-rendered when the state is updated. At that time, components have the characteristic of transitioning through various states, such as when the component is first loaded, when the component is updated, and when the component is destroyed due to an update. This is called the lifecycle.

This is getting a little complicated, so to put it simply:

"Each step in the process of changing the state of a component has a name."

It might be easier to understand if you think of it like this.

Types of Life Cycle

Next, we will look at each type of life cycle.

There are three main lifestyles:

Reference: https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

Mounting in Lifecycle

First, when the Life Cycle is mounted, this is the step when the component is first rendered.

The basic method is

• constructor
• render
• ComponentDidMount

Updating the Lifecycle

The next step is when the component's state is changed and the component is updated.

The basic method is

• render
• componentDidUpdate

Unmounting during Lifecycle

The final step is when the component is destroyed.

The basic method is

• componentWillUnmount

[React] Lifecycle story. Summary

That's all about React's life cycle.

This is an essential concept when using React as it is very useful for adding processing depending on the state of the component.