Scribd
Upload
19 views7 pages

React Lifecycle (1)

Uploaded by

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

React Lifecycle (1)

Uploaded by

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

React Lifecycle: Each component in React has a lifecycle which you can

monitor and manipulate during its three main phases.

The three phases are: Mounting, Updating, and Unmounting.

1. Mounting
The mounting phase refers to the period when a component is being created and inserted into
the DOM.

During this phase, several lifecycle methods are invoked by React to enable the developer to
configure the component, set up any necessary state or event listeners, and perform other
initialization tasks.

The mounting phase has three main lifecycle methods that are called in order:

The constructor() lifecycle method:


The constructor() method is called when the component is first created. You use it to
initialize the component's state and bind methods to the

The render() lifecycle method:


The render() method is responsible for generating the component's virtual DOM
representation based on its current props and state. It is called every time the component needs
to be re-rendered, either because its props or state have changed, or because a parent
component has been re-rendered.

The getDerivedStateFromProps() lifecycle method:


getDerivedStateFromProps() is a lifecycle method available in React 16.3 and later
versions that is invoked during the mounting and updating phase of a component.
During the mounting phase, getDerivedStateFromProps() is called after the constructor
and before render(). This method is called for every render cycle and provides an opportunity
to update the component's state based on changes in props before the initial render.
The componentDidMount() lifecycle method:
The componentDidMount() method is called once the component has been mounted into the
DOM. It is typically used to set up any necessary event listeners or timers, perform any
necessary API calls or data fetching, and perform other initialization tasks that require access to
the browser's DOM API.
Example:
2. Component Updating Phase:
This phase occurs when a component's props or state changes, and the component needs to
be updated in the DOM.

The shouldComponentUpdate() lifecycle method:


The shouldComponentUpdate() method is called before a component is updated. It takes
two arguments: nextProps and nextState. This method returns a boolean value that
determines whether the component should update or not. If this method returns true, the
component will update, and if it returns false, the component will not update.

The componentDidUpdate() lifecycle method:


The componentDidUpdate() method is a lifecycle method in React that is called after a
component has been updated and re-rendered. It is useful for performing side effects or
additional operations when the component's props or state have changed.

Example:
Output:

3. Component Unmounting Phase:


The unmounting phase refers to the lifecycle stage when a component is being removed from
the DOM (Document Object Model) and is no longer rendered or accessible.

During this phase, React performs a series of cleanup operations to ensure that the component
and its associated resources are properly disposed of.

The unmounting phase is the last stage in the lifecycle of a React component and occurs when
the component is being removed from the DOM tree.
This can happen for various reasons, such as when the component is no longer needed, the
parent component is re-rendered without including the child component, or when the application
is navigating to a different page or view.

The componentWillUnmount() lifecycle method:


During the unmounting phase, React calls the following lifecycle methods in order:

 componentWillUnmount(): This method is called just before the component is removed from the
DOM. It allows you to perform any necessary cleanup, such as canceling timers, removing event
listeners, or clearing any data structures that were set up during the mounting phase.
 After componentWillUnmount() is called, the component is removed from the DOM and all of its
state and props are destroyed.
It's important to note that once a component is unmounted, it cannot be mounted again. If you
need to render the component again, you will need to create a new instance of it.

Here's an example of how you might use the componentWillUnmount() method to perform
cleanup:

Example: app.js
Students.js

Output:

You might also like