What’s Components Life Cycle?

In react all what we see is a component , react have many methods or hooks called to update for example during the lifecycle of the component. In this article we gonna discuss this methods and we will see how to use’t.

Here goes the lifecyle of the component:

Lifecycle can be diveded in 3 phases: Mounting,Updating and Unmounting.

Mounting: Once the initialization is completed an instance has is created the of the component is created and mounted onto the DOM. At this stade we have two lifecycle avalable to use: componentWillMount and componentDid Mount.

So component WillMount is used after the constructor is called, just before render and is called once in a lifecycle. This method is not used much, here it’s better to use the constructor or the componentDidMount.

After that the componentDidMount is used when any API calls or data changes using this .setState.

Updating :

Once a component’s state and props change from the React component or through the api or backend, the component is updated by being re-rendered on the page. State and props change depending on a user’s interaction with the component or if new data is passed in.

At this phase there are 3 lifecycle methods are avalable:

componentWillReceiveProps: This lifecycle will be called in each update life-cycle caused by changes to props and will be passed an object map of all the props passed.

componentWillUpdate: this method is called just after shouldComponentUpdate has finished and just before the new component gets rendered.

componentDidUpdate: in this method is called just after the re-rendering of the component. You will have access to the previous props and state with prevProp and prevState.

Unmouting:

This method is invoked right before the component is removed from the DOM. The componentWillUmount is called just before the component get deleted.

Finally, Understanding the component lifecycle will enable you to perform certain actions when a component is created, updated or destroyed.