Mounting phase in React - Step-by-Step Execution

Concept Flow - Mounting phase

Component Function Called

↓

JSX Evaluated -> Virtual DOM Created

↓

React DOM Mounts Virtual DOM to Real DOM

↓

useEffect with empty deps runs

↓

Component Ready on Screen

The mounting phase starts when React calls the component function, creates the virtual DOM from JSX, mounts it to the real DOM, and runs effects for setup.

Execution Sample

React

import React, { useState, useEffect } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    console.log('Mounted');
  }, []);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

export default Counter;

This React component shows a button with a count starting at 0 and logs 'Mounted' once when first shown.

Execution Table

Step	Trigger	State Before	Action	State After	What Re-renders	DOM Change
1	Initial render	count: undefined	Call Counter(), useState(0) sets count=0	count: 0	Counter component	Button with text '0' created
2	JSX evaluated	count: 0	Return <button> with count 0	count: 0	Counter component	Virtual DOM button with '0' ready
3	React mounts	count: 0	Mount virtual DOM to real DOM	count: 0	Counter component	Button with '0' appears on screen
4	useEffect runs	count: 0	Run effect callback, console.log('Mounted')	count: 0	No re-render	No DOM change
5	User clicks button	count: 0	setCount(1) triggers state update	count: 1	Counter component	Button text updates to '1'
6	Re-render after click	count: 1	Re-evaluate JSX with count=1	count: 1	Counter component	Button text changes to '1'
7	No more mounting	count: 1	No further mounting phase	count: 1	No re-render	No DOM change

💡 Mounting phase ends after initial render and useEffect with empty dependencies runs.

Variable Tracker

Variable	Start	After Step 1	After Step 5	Final
count	undefined	0	1	1

Key Moments - 3 Insights

Why does useEffect run only once during mounting?

Because useEffect has an empty dependency array [], React runs it only after the first render (see step 4 in execution_table).

Is the component function called again during mounting?

Yes, the component function is called once initially to create the virtual DOM (step 1), but not again until state changes.

What triggers the DOM to update after mounting?

State changes like setCount trigger re-renders and DOM updates, but these happen after mounting (step 5 and 6).

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of 'count' after step 1?

A 1

B 0

C undefined

D null

💡 Hint

Check the 'State After' column in row for step 1.

At which step does React mount the virtual DOM to the real DOM?

A Step 4

B Step 2

C Step 3

D Step 5

💡 Hint

Look for the row where 'React mounts virtual DOM to real DOM' in the 'Action' column.

If the useEffect dependency array was not empty, when would the effect run?

A Every time the component re-renders

B Only once during mounting

C Never

D Only when the component unmounts

💡 Hint

Recall how useEffect runs with dependencies on state changes, not just mounting.

Concept Snapshot

Mounting phase in React:
- Component function runs first time
- JSX creates virtual DOM
- React mounts virtual DOM to real DOM
- useEffect with [] runs once after mount
- Component appears on screen ready for interaction

Full Transcript

The mounting phase in React starts when the component function is called for the first time. React runs useState to set initial state, then evaluates the JSX to create a virtual DOM representation. Next, React mounts this virtual DOM to the real DOM, making the component visible on the screen. After mounting, useEffect hooks with empty dependency arrays run once for setup tasks. This phase ends when the component is fully rendered and ready. Later state changes cause re-renders but are not part of mounting.

Practice

1. What does the mounting phase in React mean?

easy

A. When a component updates due to state change

B. When a component first appears on the screen

C. When a component is removed from the screen

D. When a component re-renders after props change

Solution

1. Step 1: Understand React component lifecycle phases

   The mounting phase is the first phase when a component is created and inserted into the DOM.

2. Step 2: Match the phase to the description

   Mounting means the component appears on screen for the first time, not updates or removal.

3. Final Answer:

   When a component first appears on the screen -> Option B

4. Quick Check:

   Mounting phase = first appearance [OK]

Hint: Mounting means first time component shows [OK]

Common Mistakes:

• Confusing mounting with updating
• Thinking mounting means removal
• Mixing mounting with re-rendering

2. Which of the following is the correct way to run code only once when a React component mounts using hooks?

easy

A. useEffect(() => { /* code */ }, [])

B. useEffect(() => { /* code */ })

C. useEffect(() => { /* code */ }, [state])

D. useEffect(() => { /* code */ }, [props])

Solution

1. Step 1: Recall useEffect dependency array usage

   Passing an empty array [] runs the effect only once on mount.

2. Step 2: Compare options

   useEffect(() => { /* code */ }, []) uses [] so runs once; others run on every render or when dependencies change.

3. Final Answer:

   useEffect(() => { /* code */ }, []) -> Option A

4. Quick Check:

   Empty array means run once on mount [OK]

Hint: Empty array in useEffect runs once on mount [OK]

Common Mistakes:

• Omitting dependency array runs effect every render
• Using state or props array runs effect multiple times
• Confusing useEffect with useState

3. What will be logged to the console when this component mounts?

function Timer() {
  React.useEffect(() => {
    console.log('Timer started');
  }, []);
  return <div>Timer</div>;
}

medium

A. Timer started every render

B. Nothing is logged

C. Timer started

D. Error: useEffect missing dependencies

Solution

1. Step 1: Analyze useEffect with empty dependency array

   The effect runs once on mount, logging 'Timer started' once.

2. Step 2: Confirm no repeated logs or errors

   No dependencies means no repeated logs; no error occurs.

3. Final Answer:

   Timer started -> Option C

4. Quick Check:

   useEffect with [] logs once on mount [OK]

Hint: Empty array means effect runs once on mount [OK]

Common Mistakes:

• Thinking it logs every render
• Expecting no logs without return
• Assuming error due to missing dependencies

4. Identify the error in this React component related to the mounting phase:

function DataFetcher() {
  React.useEffect(() => {
    fetch('/api/data')
      .then(response => response.json())
      .then(data => console.log(data));
  });
  return <div>Loading...</div>;
}

medium

A. Missing dependency array causes fetch on every render

B. fetch is called outside useEffect

C. No return statement in component

D. Cannot use fetch inside useEffect

Solution

1. Step 1: Check useEffect dependencies

   Without a dependency array, useEffect runs after every render, causing repeated fetch calls.

2. Step 2: Identify correct fix

   Adding an empty array [] runs fetch only once on mount, preventing repeated calls.

3. Final Answer:

   Missing dependency array causes fetch on every render -> Option A

4. Quick Check:

   No [] means effect runs every render [OK]

Hint: Always add [] to run effect once on mount [OK]

Common Mistakes:

• Forgetting dependency array in useEffect
• Thinking fetch outside useEffect is needed
• Assuming useEffect cannot contain async calls

5. You want to fetch user data only once when a component mounts and store it in state. Which code correctly implements this mounting phase behavior?

function UserProfile() {
  const [user, setUser] = React.useState(null);

  // Which useEffect is correct?

  A) React.useEffect(() => {
       fetch('/user')
         .then(res => res.json())
         .then(data => setUser(data));
     }, []);

  B) React.useEffect(() => {
       fetch('/user')
         .then(res => res.json())
         .then(data => setUser(data));
     });

  C) React.useEffect(() => {
       fetch('/user')
         .then(res => res.json())
         .then(data => setUser(data));
     }, [user]);

  D) React.useEffect(() => {
       fetch('/user')
         .then(res => res.json())
         .then(data => setUser(data));
     }, [setUser]);

  return user ? <div>{user.name}</div> : <div>Loading...</div>;
}

hard

A. useEffect with setUser dependency causing repeated fetch

B. useEffect without dependencies fetching every render

C. useEffect with user dependency causing infinite fetch

D. useEffect with empty array to fetch once on mount

Solution

1. Step 1: Understand useEffect dependencies for fetching

   Empty array [] runs effect once on mount; no dependencies cause repeated fetches.

2. Step 2: Analyze each option

   The useEffect with an empty dependency array fetches data only once on mount. Without any dependency array, the effect runs after every render. Depending on user causes an infinite loop since updating user triggers re-renders. Depending on setUser runs only once because setUser is stable, but it is unnecessary and may cause ESLint warnings.

3. Final Answer:

   useEffect with empty array to fetch once on mount -> Option D

4. Quick Check:

   Empty [] means fetch once on mount [OK]

Hint: Empty array in useEffect fetches once on mount [OK]

Common Mistakes:

• Leaving out dependency array causes infinite fetch
• Using state as dependency causing loops
• Misunderstanding stable functions as dependencies