Hi, today I’m going to explain the whole lifecycle of the class component also the same in functional components.

What you will learn after reading this article:

• Execution of lifecycles in Class Components and Functional Components from the beginning to the end

• How to implement Class Components lifecycles in Functional Components

• Proper use of lifecycles in the component according to different modes

• Lifecycle differences in Class Component and Functional Component

• Very practical tips about where to call the components and their impact on the implementation of lifecycles

• And other important and practical cases …

So let’s get started.

At first, we want to answer the question, what is the lifecycle of a component?

The lifecycle of a component in virtually all phases of its implementation from zero to one hundred until the component is fully rendered.

Each phase is suitable for a specific operation and events occur in it. So you should use the right life cycle in your component according to your needs, otherwise, it will cause errors and problems in your program.

So now that we understand these things, we are about on to introducing and explaining lifecycles.

The lifecycles of React components are divided into the following 3 sections, each of which will be described below:

1. Mounting: In this step, your initial states and data are initialized

2. Updating: In the update section, you can access your states and data, and you can perform update operations on it

3. Unmounting: And in the last section you can write the operations you want to do before unmounting of a component, such as clearing a SetInterval

#react-lifecycle #react #class-component #reactjs