Advanced in ReactJS

                          

                           Let's Grow more with React

                                   React Life Cycle

Life Cycle of Components

Each and every component in React has a life cycle and it consists of three main phases. They are Mounting, Updating and Unmounting.

What is Mounting?

Mounting is considered as the Birth of a component. In simple terms Mounting means inserting elements into Document Object Model(DOM).

When a component is mounting there are four built-in methods that mainly call by React.

They are:     constructor()

                     getDerivedStateFromProps()

                      render()

                      componentDidMount()

constructor()

Constructor() is the first method to call and it is called with props. Always call super(props) to bind this.props.

getDerivedStateFromProps()

We use this to update our state from props. This method is called before rendering elements in the DOM.
Since we cannot set the state inside this method we only can update the state by returning an object.

render()

This method is called every time when state or props getting changed.
This returns Fragments, Strings, JSX, Boolean, Portal etc.

componentDidMount()

We use this method to update the state so other that other life cycle methods can be triggered.
In here AJAX request and Dom or state updates should occur.

What is Updating?

This is the second phase of the life cycle. This phase appears when a component's state or props get changed.

This phase consists of five built-in methods. They are,

getDerivedStateFromProps()
shouldComponentUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()

getDerivedStateFromProps()

Use this to update state from props.
Since we cannot set the state inside this method we have to update the state by returning an object.

shouldComponentUpdate()

In this method, we can return a boolean value. This boolean value species whether to continue with rendering or not.
In other hands, this method helps to improve performance.

render()

 When there are new changes in HTML those changes are re-render to the DOM by this render() method.

getSnapshotBeforeUpdate()

In this method, even after the update, we can check what were the values before the update since we have access to the props and state.
It is essential to call componentDidUpdate method along with getSnapshotBeforeUpdate.Otherwise, it will give an error.

componentDidUpdate()

This method is invoked right after updating occurs.
This method will only execute if shouldComponentUpdate() method returns true.

What is Unmounting?

This is the third phase of the life cycle. We call this method when the component is removed from the DOM.
This phase only consists of one method called componentWillUnmount().

componentWillUnmount()

This method is invoked before a component is unmounted and destroyed.Once a component instance is unmounted there is no chance to be mounted again.