Lifecycle methods of ReactJS component

When you create a ReactJS component, it doesn't just directly add to the DOM and behave as you need. Any ReactJS component goes through various life-cycle ( born, grow and die ).

So ReactJS provides many lifecycle methods. These lifecycle methods are called at different stages of the life of the component. e.g. When ReactJS component is created, the constructor() method is called.

Why use lifecycle methods of ReactJS?

ReactJS calls lifecycle methods of components at every main stage of ReactJS components. e.g. When a component is created, when a component is updated, when a component is added to DOM etc.
These lifecycle methods give you better control over component and its behavior. e.g. If you want to call some API to get the data and you want to do it after component added to the DOM, then you can call the API in componentDidMount() lifecycle method. or if you want to initialize something when component is created, you can do it in constructor() method.

ReactJS component's lifecycle

ReactJS component lifecycle
ReactJS component lifecycle

The above image describes the component's lifecycle and lifecycle methods. Every component has 3 stages of life.

Mounting of a component

Mounting of the component is the first phase of the component which starts with the creating of the component until the component is added to the DOM.

The below methods are called in this phase in the same order.

Updataing of component

Updating of the component phase updates the component. Updating the component consists updating state object of the component and rendering the component.
This phase is caused when you change state or props of the component.

The below methods are called in this phase in the same order.

Unmounting of a component

Unmounting of component is the last phase of the component. The unmounting phase consists only one method which will be called when a component is being removed from dom.

Conclusion

In this section, we learned about lifecycle methods of ReactJS component. We will see all the lifecycle methods in upcoming sections.
In the next section, you will learn about constructor() of ReactJS component.