Stages of the lifecycle

ReactJunior~3 min read

3 main stages of a component's lifecycle

Every React component goes through three main stages:

Mounting (Mount) - creation and insertion into the DOM
Updating (Update) - re-rendering when data changes
Unmounting (Unmount) - removal from the DOM

1. Mounting (Mount)

This is the moment when a component is created for the first time and appears in the DOM. React calls the component, creates DOM elements, and "inserts" them into the page.

What React does:

calls the component for the first time (renders JSX);
creates internal structures (Virtual DOM);
inserts elements into the real DOM;
calls effects (useEffect / useLayoutEffect) with an empty dependency array [].

What you can do:

API requests (fetch)
Event subscriptions
Setting up timers
Interacting with the DOM

Example:

javascript

useEffect(() => {
  console.log("Component mounted");
}, []);

Called only once, when the component first appears.

2. Updating (Update)

Happens every time:

props change (the component's input data),
state changes (internal state),
the parent component re-renders.

React calls the component again, compares the Virtual DOM, and updates only the parts that changed.

What React does:

calls the component again;
updates the DOM if the JSX result has changed;
calls effects whose dependencies have changed (useEffect(..., [deps])).

What you can do:

React to changes in state or props
Update data when parameters change
Synchronize the component with external state

Example:

javascript

useEffect(() => {
  console.log("Update: count changed");
}, [count]);

3. Unmounting (Unmount)

When a component is removed from the DOM (for example, the page changed, or a modal was closed).

React calls the cleanup functions from effects to release resources.

What React does:

removes the component from the DOM;
calls the cleanup functions (return () => {...} inside useEffect).

What you can do:

Cancel requests
Clear timers
Remove event handlers
Release resources

Example:

javascript

useEffect(() => {
  console.log("Mounted");
  return () => {
    console.log("Unmounted");
  };
}, []);

Visually

javascript

Mount → Update → Update → Unmount

Every component goes through this cycle (sometimes just mount → unmount, if it never updates).

For comparison: class and functional approaches

Stage	Class method	Hook (functional component)
Mounting	componentDidMount()	useEffect(() => {...}, [])
Updating	componentDidUpdate()	useEffect(() => {...}, [deps])
Unmounting	componentWillUnmount()	useEffect(() => { return () => {...} }, [])

Additional "internal" stages (for a deeper understanding)

React 18, with its Fiber architecture, introduced a more detailed breakdown of the cycle:

Phase	What happens
Render phase	React calls the components and builds the Virtual DOM (but does not yet change the real DOM)
Commit phase	React compares the old and new tree and applies the changes to the DOM
Layout phase	useLayoutEffect runs, along with DOM synchronization
Passive phase	Ordinary useEffect runs (asynchronously, after painting)

These phases exist for optimization (concurrent rendering, startTransition, etc.), but in practice you usually work with the 3 main stages: Mount → Update → Unmount.

Summary

Stage	When it happens	What React does	What the developer does
Mount	On the first render	Creates and inserts the component into the DOM	Loads data, subscribes to events
Update	When props or state change	Re-renders the component	Reacts to changes
Unmount	When the component is removed	Removes the component from the DOM	Cleans up resources and subscriptions

The main idea:

A component's lifecycle is 3 key stages: Mounting → Updating → Unmounting, and hooks (useEffect, useLayoutEffect) let you perform actions at the right moment.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.