Mounting phase in React - Deep Dive

Overview - Mounting phase

What is it?

The mounting phase in React is the first stage when a component is created and inserted into the webpage. During this phase, React builds the component's structure and shows it on the screen for the first time. It sets up everything needed for the component to work, like preparing data and event handlers. This phase happens only once for each component instance.

Why it matters

Without the mounting phase, components would never appear on the screen, so users would see nothing. It solves the problem of turning code into visible parts of a webpage. Understanding this phase helps you control what happens when a component first appears, like loading data or setting up animations, making your app feel smooth and responsive.

Where it fits

Before learning the mounting phase, you should know basic React concepts like components and JSX. After mastering mounting, you will learn about updating and unmounting phases, which handle changes and removal of components. This fits into the bigger React lifecycle journey that manages how components behave over time.

Mental Model

Core Idea

The mounting phase is when React creates and places a component on the page for the first time, setting it up to work properly.

Think of it like...

It's like planting a seed in a garden: you prepare the soil, plant the seed, and water it so it can start growing visibly.

┌───────────────┐
│ Mounting     │
│ Phase        │
├───────────────┤
│ 1. Create    │
│    component │
│ 2. Build DOM │
│ 3. Insert in │
│    page      │
│ 4. Setup     │
│    events    │
└───────────────┘

Build-Up - 6 Steps

1

Foundation

What is a React component?

Concept: Introduce the basic building block of React apps: components.

A React component is like a small piece of a webpage. It can be a button, a form, or a whole section. Components are written using JavaScript and JSX, which looks like HTML but works inside JavaScript. They describe what should appear on the screen.

Result

You understand that components are reusable pieces that React uses to build the webpage.

Knowing what a component is helps you see why React needs to 'mount' them to show them on the page.

2

Foundation

JSX and rendering basics

Concept: Explain how JSX turns into visible content on the webpage.

JSX looks like HTML but is actually JavaScript code. React reads JSX and creates a virtual version of the webpage called the virtual DOM. Then React updates the real webpage to match this virtual DOM. Rendering means turning JSX into actual elements users see.

Result

You see how React prepares what to show before putting it on the screen.

Understanding rendering is key to grasping what happens during mounting when React first shows a component.

3

Intermediate

Mounting lifecycle methods and hooks

🤔Before reading on: do you think React runs special code automatically when a component first appears? Commit to yes or no.

Concept: Introduce React's ways to run code during mounting using lifecycle methods and hooks.

In React, you can run code when a component mounts using the useEffect hook with an empty dependency array. This runs once after the component appears. In older class components, methods like componentDidMount serve this purpose. This is where you can fetch data or set up timers.

Result

You can control what happens right after a component shows up, like loading data or starting animations.

Knowing how to run code on mount lets you prepare your component's data and behavior exactly when it becomes visible.

4

Intermediate

Virtual DOM and mounting

🤔Before reading on: does React immediately change the real webpage when a component mounts, or does it use a middle step? Commit to your answer.

Concept: Explain how React uses the virtual DOM to efficiently mount components.

React first creates a virtual DOM tree representing the component. It compares this with what is already on the page and only changes what is needed. During mounting, React builds this virtual tree and then updates the real DOM to match it. This makes mounting fast and smooth.

Result

You understand that React doesn't blindly rewrite the page but carefully updates it for performance.

Understanding the virtual DOM's role in mounting helps you appreciate React's speed and efficiency.

5

Advanced

Mounting with server-side rendering

🤔Before reading on: do you think mounting happens only in the browser, or can it happen on the server too? Commit to your guess.

Concept: Show how mounting works when React renders components on the server before sending to the browser.

With server-side rendering (SSR), React builds the component's HTML on the server and sends it to the browser. The browser then 'hydrates' this HTML, attaching event handlers and making it interactive. This hydration is part of mounting and improves load speed and SEO.

Result

You see that mounting can start on the server and finish in the browser for better performance.

Knowing SSR mounting helps you build faster apps that work well even before JavaScript fully loads.

6

Expert

Concurrent React and mounting surprises

🤔Before reading on: do you think mounting always happens once per component, or can React pause and restart it? Commit to your answer.

Concept: Explore how React's concurrent mode can interrupt and restart mounting for better user experience.

In concurrent React, mounting can be paused, interrupted, or restarted to keep the app responsive. React may start mounting a component, pause to handle user input, then resume. This means mounting is not always a simple one-time process. Developers must write code that handles this gracefully.

Result

You understand that mounting is more flexible and complex in modern React, requiring careful coding.

Knowing concurrent mounting prevents bugs and helps you write components that work smoothly under React's new rendering strategies.

Under the Hood

When React mounts a component, it first calls the component function or class constructor to get the JSX structure. React then creates a virtual DOM tree from this JSX. It compares this tree to the current virtual DOM and calculates the minimal changes needed. React then updates the real DOM accordingly. During this, React sets up event listeners and runs any mounting effects. In concurrent mode, this process can be split into chunks and paused to keep the app responsive.

Why designed this way?

React was designed to separate the virtual DOM from the real DOM to improve performance and developer experience. The mounting phase needed to be efficient and predictable to allow fast initial rendering. The introduction of hooks and concurrent mode evolved mounting to handle asynchronous rendering and side effects better, balancing speed and interactivity.

┌───────────────┐       ┌───────────────┐       ┌───────────────┐
│ Component     │──────▶│ Virtual DOM   │──────▶│ DOM Update    │
│ Function/     │       │ Creation      │       │ & Event Setup │
│ Constructor   │       └───────────────┘       └───────────────┘
│ (JSX Output)  │
└───────────────┘
       │
       ▼
┌───────────────┐
│ useEffect Hook│
│ Runs on Mount │
└───────────────┘

Myth Busters - 3 Common Misconceptions

Quick: Does React run useEffect code before or after the component appears on screen? Commit to your answer.

Common Belief: useEffect runs before the component is shown, so it can prepare everything first.

Reality: useEffect runs after the component is mounted and painted on the screen.

Why it matters: If you try to fetch data or manipulate the DOM before the component appears, you might see flickers or errors because the DOM isn't ready yet.

Quick: Does mounting happen every time a component updates? Commit to yes or no.

Common Belief: Mounting happens every time the component changes or updates.

Reality: Mounting happens only once when the component first appears; updates are handled in a separate phase.

Why it matters: Confusing mounting with updating can lead to running expensive setup code multiple times, hurting performance.

Quick: In concurrent React, does mounting always complete without interruption? Commit to your guess.

Common Belief: Mounting is a single, uninterrupted process that finishes before anything else happens.

Reality: Concurrent React can pause and restart mounting to keep the app responsive.

Why it matters: Ignoring this can cause bugs if your code assumes mounting is atomic and synchronous.

Expert Zone

1

React's mounting phase can be split into multiple micro-tasks in concurrent mode, which means side effects must be idempotent and safe to run multiple times.

2

The order of mounting effects (useEffect) is guaranteed, but their timing can vary, so relying on synchronous DOM changes inside effects can cause subtle bugs.

3

Server-side rendering's hydration phase is a special kind of mounting that reuses existing HTML, requiring careful matching of server and client output to avoid errors.

When NOT to use

Avoid relying on mounting effects for critical synchronous setup like measuring layout; instead, use layout effects (useLayoutEffect). For very simple static content, consider static HTML without React to reduce mounting overhead.

Production Patterns

In production, mounting is used to fetch initial data, start animations, or set up subscriptions. Developers often combine mounting with context providers to initialize app-wide state. Advanced apps use Suspense and concurrent features to delay mounting until data is ready, improving user experience.

Connections

Component Updating Phase

Builds-on

Understanding mounting clarifies how components first appear, which helps grasp how they later change during updates.

Server-Side Rendering (SSR)

Builds-on

Mounting in SSR involves hydration, linking client and server rendering for faster load times and SEO benefits.

Operating System Process Initialization

Similar pattern

Just like an OS sets up resources and environment when starting a process, React's mounting phase sets up the component's environment before it runs.

Common Pitfalls

#1 Running data fetching code directly in the component body during mounting.

Wrong approach:

function MyComponent() {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data));
return Hello;
}

Correct approach:

import { useEffect } from 'react';
function MyComponent() {
useEffect(() => {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data));
}, []);
return Hello;
}

Root cause:

Misunderstanding that component body runs on every render and should be pure, while side effects like data fetching belong in useEffect.

#2 Assuming useEffect runs before the component is visible and trying to measure DOM size inside it.

Wrong approach:

useEffect(() => {
const height = document.getElementById('box').offsetHeight;
console.log(height);
}, []);

Correct approach:

import { useLayoutEffect } from 'react';
useLayoutEffect(() => {
const height = document.getElementById('box').offsetHeight;
console.log(height);
}, []);

Root cause:

Confusing useEffect timing with useLayoutEffect; useEffect runs after painting, so measurements may be delayed or inaccurate.

#3 Writing mounting code that assumes it runs only once without considering concurrent mode interruptions.

Wrong approach:

useEffect(() => {
startAnimation();
return () => stopAnimation();
}, []);

Correct approach:

useEffect(() => {
let isActive = true;
startAnimation();
return () => {
if (isActive) stopAnimation();
isActive = false;
};
}, []);

Root cause:

Not accounting for React's ability to pause and restart mounting, which can cause side effects to run multiple times unexpectedly.

Key Takeaways

The mounting phase is when React creates and inserts a component into the webpage for the first time.

React uses the virtual DOM to efficiently build and update the real DOM during mounting.

You run setup code during mounting using hooks like useEffect with an empty dependency array.

Concurrent React can pause and restart mounting, so mounting code must be safe and idempotent.

Understanding mounting helps you control initial data loading, animations, and event setup for smooth user experiences.