PART-20

Life Cycle Or Phases

Of Components
REACT
PRESENTER: MOHAMMAD ADIL
 Phases / Lifecycle of Human REACT
Man Old
Young Boy Grave

Baby
 Phases / Lifecycle of Components REACT

Organize Arrange
Set Up Prepare

Mounting Updating UnMounting

 Phases / Lifecycle of Components REACT

Mounting means putting The Last phase in the lifecycle

elements into the DOM. is when a component is
removed from the DOM

Mounting Updating UnMounting

A component is updated
whenever there is a change
in the component's state or props.
 Phases / Lifecycle of Components REACT

Whenever some error occurs during

Mounting or updating then this phase
Comes into place

Error UnMounting
Mounting Updating Handling
Phases / Lifecycle of Components REACT

• Each component in React has a lifecycle which you can monitor and
manipulate during its three main phases.
• The three phases are:
• Mounting
• Updating
• Unmounting
 Mounting
Updating
UnMounting Header
Header

Content
React’s Actual
Virtual DOM DOM Side
Sidebar Content
bar

Footer Sidebar My Sidebar

Footer
Error Handling
React’s Virtual DOM REACT

• 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.
• It is exactly the same, but it does not have the power to directly change
the layout of the document.
React’s Virtual DOM REACT

• 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 REACT

• 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 REACT

• Mounting means putting elements into the DOM.

• In this phase, an instance of a component is being created and inserted
into the DOM.
Updating REACT

• 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 REACT

• 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 REACT

• Each component has several “lifecycle methods” that you can override
to run code at particular times in the process.