Scribd
Upload
30 views1 page

Life Cycle

Uploaded by

gagangk8822
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
30 views1 page

Life Cycle

Uploaded by

gagangk8822
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 1

A class component has three different life cycle phases.

1. Mounting phase

In the mounting phase, a component is attached to the DOM


a) constructor()
b) getDerivedStateFromProps()
c) render()
d) componentDidMount()

In the mounting phase only render() is mandatory

The constructor method is the first method to be called in a class. Even if


constructor method is not written in the class, it will be called.

The getDerivedStateFromProps is called just before the render method. It must


return an object. It is a static method.This lifecycle method is used in React
class components to update the component's state based on changes in the props
received by the component.

ComponentDidMount is the method that will be called after a component is mounted


into the DOM. This method is most useful when we want to make any API Call
(fetching DAta). This is because this method is executed only once after the
component has been mounted. That is why API calls are made in this method, so that
same request is not sent again and again to the backend.

2. Updating phase
In the updating phase changes are made to the component. These changes are made to
the state of the component.

a) getDerivedStateFromProps()
b) shouldComponentUpdate()
c) render()
d) getSnapshotBeforeUpdate()
e) componentDidUpdate()

The shouldComponentUpdate method allows us to control and optimize the


rendering process by determining whether a component should update (re-render) in
response to changes in props or state.

The getSnapshotBeforeUpdate lifecycle method is used to capture a snapshot of


the component's current state right before a component update is made (e.g., before
a re-render). It can be useful for saving information before a change and then
accessing it after the update.

The componentDidUpdate method is invoked after a component has been updated


(re-rendered), which typically occurs in response to changes in its props or state.
It's a valuable tool for managing side effects, interactions with the DOM, and
performing actions that depend on the component's updated state.

3. Unmounting phase
In this phase a component is removed from the DOM
a) ComponentWillUnmount

You might also like