React Life Cycle Of Component & Its Methods

In This Blog, you are going to learn React life cycle or phases of component, and you will also going to learn life cycle methods and its order of execution.

Life Cycle Or Phases Of Components

Phases / Lifecycle of Components

Each component in React JS has a lifecycle which you can monitor and manipulate during its three main phases.

The three phases are: 

1. Mounting
2. Updating
3. Unmounting

React’s Virtual DOM

• In React’s Virtual DOM: React uses Virtual DOM exists which is like a lightweight copy of the actual DOM(a virtual representation of the DOM).
• So for every object that exists in the original DOM, there is an object for that in React Virtual DOM.
• Note that It is exactly the same, but it does not have the power to directly change the layout of the document.
• Note that Manipulating DOM is slow, but manipulating Virtual DOM is fast as nothing gets drawn on the screen.
• So each time there is a change in the state of our application, the virtual DOM gets updated first instead of the real DOM. 

Important Note

• These 3 phases or life cycle only applied to class components not on functional component.
• There is another way of applying life cycle on functional components are called hooks.

Mounting

• In React JS, Mounting means putting elements into the DOM.
• In this phase, an instance of a component is being created and inserted into the DOM.

Updating

• In React JS, the next phase in the lifecycle is when a component is updated.
• A component is updated whenever there is a change in the component’s state or props.

Unmounting

• In React JS, the next phase in the lifecycle is when a component is removed from the DOM, or unmounting as React likes to call it.

The Component Lifecycle

• In React JS, each component has several “lifecycle methods” that you can override to run code at particular times in the process.

Methods In Mounting

React has four built-in methods that gets called, in this order, when mounting a component:

1. constructor()
2. getDerivedStateFromProps()
3. render()
4. componentDidMount()

In React JS, the render() method is required and will always be called, the others are optional and will be called if you define them.

Methods of Updating

In React JS, React has five built-in methods that gets called, in this order, when a component is updated:

1. getDerivedStateFromProps()
2. shouldComponentUpdate()
3. render()
4. getSnapshotBeforeUpdate()
5. componentDidUpdate()

In This phase, the render() method is also required and will always be called, the others are optional and will be called if you define them.

Method Of Unmounting

• The next phase in the lifecycle is when a component is removed from the DOM, or unmounting as React likes to call it.
• React has only one built-in method that gets called when a component is unmounted:
• componentWillUnmount()

Click Below Link to Download Notes Of This Blog

https://www.mediafire.com/file/fx9n9bjrzq5ryoa/Life+Cycle+Of+Components+In+React+JS.rar/file