brief overview of react component life cycle
Published: 2021-12-22 14:52:22

Every piece of code we write has a life cycle which defines the when execution of that code will occur. Since React is based on component system where each component is a code block and has its own life cycle. So lets dive to into it!
By life cycle it means that there will be a birth  state, they growing state and finally the dead state. In react there are specific terms called initialization, mounting, updating and unmounting respectively. During the whole life cycle various methods are called depending on what phase the component is facing. These methods makes manipulation of component easy.

We already learnt about the four phases. Each phase have a particular list of methods it calls upon.
  
Initialization phase:
This is where the component gets created and it sets its props with necessary state initialization. This arrangements are done in a method called constructor. 
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8jl7syoqdow9bezdbsta.jpg)

Mounting:
This is the phase where our components gets updated and loaded into the browser. Then the browser inserts it into the DOM. So this is the phase where our component first gets rendered. This is exactly the next phase after the initialization. The updating is a longer process and so it has many methods it will call to make the necessary updating tasks. 


First there is the componentWillMount method. It is called just before the component is loaded into the browser. It helps the browser to get loaded into the browser. It is better not to call any API during this phase as the component is not rendered yet.  Since the DOM is not ready we obviously can not make any improvements to it.

Next we have the componentDidMount method. This refers the situation where the component is loaded into the browser. Just before this method render method is called.  It gets called soon as componentWillMount is called.Then finally the componentDidMount is called. Now we can make API calls and update the DOM. 

   
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aywte6i5r2zxhkmc1yz4.jpg)
 

Update: Next we have the update phase. During this phase component updates its states and props. If there is any user interaction then it will lead to change in state and props information.  And due to the changes the re-rendering is also happens here. This is the situation where 
componentShouldUpdate method is called. This methods decides whether the re-rendering will occur or not. If it will re-render then the method returns true else false. This decision depend on the two arguments we pass that are nextProps and nextState. Next componentWillUpdate method will be called before re rendering. This will perform any sort of calculation before rending again. Finally after the rendering is done componentDidUpdate method is called and it takes the prev states and props data from which the component update.

Unmounting
This is the final phase of the component where component gets unloaded from DOM. at frist the componentWillUnMount is called. This method initializes the unmounting process.
 Thus the component is unloaded from DOM and finishes the execution of the component!