ReactJS | Lifecycle of Components

We have studied so far that React web apps are actually a collection of independent
components that run according to the interactions made with them.

Every React Component has a lifecycle of its own, lifecycle of a component can be
defined as the series of methods that are invoked in different stages of the
component’s existence.

This video is a sole property of Talent Battle Pvt. Ltd. Strict Penal Action will be taken against unauthorized piracy of this video
 A React Component can go through four stages of its life as follows.

Initialization: This is the stage where the component is constructed with the given Props
and default state. This is done in the constructor of a Component Class.

Mounting: Mounting is the stage of rendering the JSX returned by the render method
itself.

Updating: Updating is the stage when the state of a component is updated and the
application is repainted.

Unmounting: As the name suggests Unmounting is the final step of the component
lifecycle where the component is removed from the page.

This video is a sole property of Talent Battle Pvt. Ltd. Strict Penal Action will be taken against unauthorized piracy of this video
This video is a sole property of Talent Battle Pvt. Ltd. Strict Penal Action will be taken against unauthorized piracy of this video
 Initialization:

In this phase, the developer has to define the props and initial state of the component

this is generally done in the constructor of the component.

This video is a sole property of Talent Battle Pvt. Ltd. Strict Penal Action will be taken against unauthorized piracy of this video
 Mounting:

Mounting is the phase of the component lifecycle when the initialization of the
component is completed and the component is mounted on the DOM and rendered for
the first time on the webpage.

Now React follows a default procedure in the Naming Conventions of these predefined
functions where the functions containing “Will” represents before some specific phase
and “Did” represents after the completion of that phase.

This video is a sole property of Talent Battle Pvt. Ltd. Strict Penal Action will be taken against unauthorized piracy of this video
 The mounting phase consists of two such predefined functions as described below.

componentWillMount() Function:

As the name clearly suggests, this function is invoked right before the component is
mounted on the DOM i.e. this function gets invoked once before the render() function is
executed for the first time.

componentDidMount() Function:

Similarly as the previous one this function is invoked right after the component is
mounted on the DOM i.e. this function gets invoked once after the render() function is
executed for the first time.

This video is a sole property of Talent Battle Pvt. Ltd. Strict Penal Action will be taken against unauthorized piracy of this video
 Updation:

React is a JS library that helps create Active web pages easily.

Now active web pages are specific pages that behave according to their user.

Updation is the phase where the states and props of a component are updated followed
by some user events such as clicking, pressing a key on the keyboard, etc.

This video is a sole property of Talent Battle Pvt. Ltd. Strict Penal Action will be taken against unauthorized piracy of this video
 componentWillReceiveProps() Function:

This is a Props exclusive Function and is independent of States.

This function is invoked before a mounted component gets its props reassigned.

The function is passed the new set of Props which may or may not be identical to the
original Props.

Thus checking is a mandatory step in this regard.

This video is a sole property of Talent Battle Pvt. Ltd. Strict Penal Action will be taken against unauthorized piracy of this video
 setState() Function:

This is not particularly a Lifecycle function and can be invoked explicitly at any
instant.

This function is used to update the state of a component.

shouldComponentUpdate() Function:

By default, every state or props update re-render the page but this may not always be
the desired outcome, sometimes it is desired that updating the page will not be
repainted.

This video is a sole property of Talent Battle Pvt. Ltd. Strict Penal Action will be taken against unauthorized piracy of this video
 componentWillUpdate() Function:

As the name clearly suggests, this function is invoked before the component is
rerendered i.e. this function gets invoked once before the render() function is executed
after the updation of State or Props.

componentDidUpdate() Function:

Similarly this function is invoked after the component is rerendered i.e. this function
gets invoked once after the render() function is executed after the updation of State or
Props.

This video is a sole property of Talent Battle Pvt. Ltd. Strict Penal Action will be taken against unauthorized piracy of this video
 Unmounting:

This is the final phase of the lifecycle of the component that is the phase of
unmounting the component from the DOM.

The following function is the sole member of this phase.

componentWillUnmount() Function:

This function is invoked before the component is finally unmounted from the DOM i.e.
this function gets invoked once before the component is removed from the page and
this denotes the end of the lifecycle.

This video is a sole property of Talent Battle Pvt. Ltd. Strict Penal Action will be taken against unauthorized piracy of this video
 Differences between Functional Components and Class Components
in React

Prob: Implement the Counter App to showcase the difference.

This video is a sole property of Talent Battle Pvt. Ltd. Strict Penal Action will be taken against unauthorized piracy of this video