A component undergoes various life cycle events. They assist us in determining when to initialize which part of a component or when to fetch some external data.
The component lifecycle is divided into three high-level components:
Mounting occurs during the initialization and placement of the component into the DOM for the first time. When a component is updated as a result of a changing state or props, this is referred to as updating. When a component is removed from the DOM, it is unmounted.
ComponentDidMount:
This is called immediately upon component mounting and only once upon component rendering.
The final method called during the mounting step is componentDidMount(). The following is the sequence:
The constructor render() returns whether componentDidMount was mounted ()
In other words, it is invoked following the component's rendering.
componentWillUnmount:
componentWillUnmount() is invoked during the component's unmounting process, just before it is totally destroyed. This is an excellent opportunity to clean up any of your component's mess.
This is the term used when a component gets detached from the body. This can be used to free up resources, execute cleanups, and unset any timers.
componentDidUpdate:
It is a good place for update-phase work.
Summary:
We described the component's life cycle in this blog. We covered the various life cycle methods and their application.
The most critical lifecycle techniques that we employed were as follows:
- ComponentDidMount.
- ComponentWillUnMount.
- ComponentDidUpdate.
I hope this article and the examples we went over helped you grasp what React lifecycle methods are and how they work.