React component life cycle, and how it works
Published: 2021-12-30 15:19:38

Each piece of code we type in incorporates a life cycle which characterizes the when execution of that code will happen. Since Respond is based on component framework where each component may be a code square and has its claim life cycle. So lets plunge to into it! By life cycle it implies that there will be a birth state, they developing state and at last the dead state. In respond there are particular terms called initialization, mounting, upgrading and unmounting separately. Amid the full life cycle different strategies are called depending on what stage the component is confronting. These strategies makes control of component easy. We as of now learnt around the four stages. Each stage have a specific list of strategies it calls upon. 

Initialization phase: This is where the component gets made and it sets its props with fundamental state initialization. This courses of action are wiped out a strategy called constructor.

Mounting: This is the stage where our components gets upgraded and stacked into the browser. At that point the browser embeds it into the DOM. So this can be the phase where our component to begin with gets rendered. This is often precisely the another stage after the initialization. The overhauling may be a longer handle and so it has numerous strategies it'll call to form the vital overhauling tasks. First there's the componentWillMount strategy. It is called fair before the component is stacked
 into the browser. It makes a difference the browser to induce stacked into the browser. It is way better not to call any API amid this stage as the component isn't rendered however. Since the DOM isn't prepared we clearly can not make any improvements to it. Next we have the componentDidMount strategy. This alludes the circumstance where the component is stacked into the browser. Fair some time recently this strategy render strategy is called. It gets called before long as componentWillMount is called.Then at long last the componentDidMount is called. Presently we are able make API calls and update the DOM.

Update: Another we have the overhaul stage. Amid this stage component upgrades its states and props. In the event that there's any user interaction at that point it'll lead to alter in state and props data. And due to the changes the re-rendering is additionally happens here. This can be the situation where componentShouldUpdate strategy is called. This strategies chooses whether the re-rendering will happen or not. In case it'll re-render at that point the strategy returns genuine else wrong. This choice depend on the two contentions we pass that are nextProps and nextState. Following componentWillUpdate strategy will be called some time recently re rendering. This will perform any sort of calculation some time recently severing once more. At last after the rendering is done componentDidUpdate strategy is called and it takes the prev states and props information from which the component update.

Unmounting: This is the ultimate stage of the component where component gets emptied from DOM. at first the componentWillUnMount is called. This strategy initializes the unmounting process. Th