React Component Lifecycle

There are three parts of react component lifecycle. Those are Mounting, Updating, Unmounting.

Mounting: 

    Constructor(): A constructor is a method when we created an object from that class.  A primary task of this class is to manage initialization, such as defaulting properties and sanity testing arguments. A constructor, in its simplest form, is a method for creating class objects.

    getDerivedStateFromProps(): This method depends on updating props. This method is called before render in react  Mounting and Unmounting part. It takes updated props and states as an argument. 

    render(): This method is recommended, This method shows the output HTML to DOM.

    componentDidMount(): This method allows us to execute react code when the component is already placed into the dom. This method is called during the mounting phase of the react lifecycle after the component is re-rendered. 

Updating:

    

    getDerivedStateFromProps(): This method is depend on component update or props update. It is called the static method which renders before the mounting and updating phase.

    

    shouldComponentUpdate(): This method allows us to avoid re-render complex react lifecycle. It only re-render when props or component update. It increases the performance of the web application. 

    render(): This method call again when any component or props update and re-render again HTML to DOM, with the new changes.

    getSnapShotBeforeUpdate(): This method can access the previous value before the update, which means after the component update we can see the previous value using this method. 

    componentDidUpdate(): When a component is updated, we can execute the react code using componentDidUpdate(). During component change, the network request is made in this code. This method is called after componentDidMount().

Unmounting: 

    componentWillUnmount(): This method is called when a component is deleted from DOM. 

`