ReactDOM render process - Step-by-Step Execution

Concept Flow - ReactDOM render process

Start ReactDOM.render()

↓

Evaluate JSX -> Create React Elements

↓

Build Virtual DOM Tree

↓

Compare with Previous Virtual DOM?

↓

Diff Virtual DOM

↓

Update Real DOM

↓

React Component Mounted

↓

End

This flow shows how ReactDOM.render starts by creating React elements, builds a virtual DOM, compares it to the previous one, then updates or mounts the real DOM accordingly.

Execution Sample

React

import React from 'react';
import ReactDOM from 'react-dom/client';

const App = () => <h1>Hello!</h1>;

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

This code creates a React root and renders a simple App component that displays 'Hello!'

Execution Table

Step	Action	Evaluation	Result
1	Call ReactDOM.createRoot	document.getElementById('root') found	Root object created
2	Call root.render(<App />)	Evaluate <App /> JSX	React element: {type: 'h1', props: {children: 'Hello!'}}
3	Build Virtual DOM tree	Virtual DOM tree with one h1 node	Virtual DOM ready
4	Compare with previous Virtual DOM	No previous Virtual DOM	Mount new DOM
5	Create real DOM node <h1>	Create DOM element	DOM node <h1>Hello!</h1> created
6	Insert DOM node into #root	Append child	DOM updated in browser
7	Component mounted	React lifecycle complete	UI visible with 'Hello!'
8	End	Render process complete	ReactDOM.render finished

💡 Render process ends after mounting the initial DOM and completing component lifecycle

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 5	Final
root	undefined	Root object created	Root object unchanged	Root object unchanged	Root object unchanged
element	undefined	React element created	Virtual DOM tree built	Virtual DOM unchanged	Virtual DOM unchanged
realDOM	undefined	undefined	undefined	<h1>Hello!</h1> node created	<h1>Hello!</h1> node inserted

Key Moments - 3 Insights

Why does React build a Virtual DOM before updating the real DOM?

React builds a Virtual DOM to compare with the previous one (see step 4) so it only updates parts that changed, making updates faster and efficient.

What happens if there is no previous Virtual DOM?

If no previous Virtual DOM exists (step 4), React mounts the entire new DOM from scratch (step 5), as shown in the execution table.

When does the real DOM get updated during render?

The real DOM updates happen after React creates the DOM nodes (step 5) and inserts them into the page (step 6), making UI visible.

Visual Quiz - 3 Questions

Look at the execution table, what is the React element created at step 2?

A A button element with label 'Click'

B A div element with no children

C An h1 element with text 'Hello!'

D An empty React fragment

💡 Hint

Check the 'Evaluation' column at step 2 in the execution table

At which step does React insert the real DOM node into the page?

A Step 5

B Step 6

C Step 3

D Step 7

💡 Hint

Look for the action describing 'Insert DOM node' in the execution table

If a previous Virtual DOM existed, what would React do differently at step 4?

A Compare Virtual DOMs and update only changed parts

B Skip comparing and mount new DOM anyway

C Delete the previous DOM and rebuild everything

D Do nothing and end render

💡 Hint

Step 4 shows the decision React makes based on previous Virtual DOM presence

Concept Snapshot

ReactDOM.render process:
1. Create React elements from JSX
2. Build Virtual DOM tree
3. Compare with previous Virtual DOM
4. Update or mount real DOM accordingly
5. Complete component lifecycle and show UI

Full Transcript

The ReactDOM render process starts when ReactDOM.createRoot is called with a DOM container. Then root.render is called with a React component. React evaluates the JSX to create React elements, which form a Virtual DOM tree. React compares this Virtual DOM with the previous one to find changes. If no previous Virtual DOM exists, React mounts the new DOM nodes directly. It creates real DOM elements and inserts them into the container. Finally, the component lifecycle completes and the UI becomes visible. This process optimizes updates by minimizing real DOM changes.

Practice

1. What is the main purpose of ReactDOM.createRoot in React?

easy

A. To define a new React component

B. To update the state of a component

C. To create a root container to render React components into the DOM

D. To fetch data from an API

Solution

1. Step 1: Understand ReactDOM.createRoot role

   This function creates a root container that connects React with a specific DOM element.

2. Step 2: Connect React components to the DOM

   Using this root, React can render components inside the chosen HTML element.

3. Final Answer:

   To create a root container to render React components into the DOM -> Option C

4. Quick Check:

   ReactDOM.createRoot creates root container [OK]

Hint: ReactDOM.createRoot sets where React shows content [OK]

Common Mistakes:

• Confusing createRoot with component creation
• Thinking it updates state
• Assuming it fetches data

2. Which of the following is the correct syntax to render a React component App inside a DOM element with id root using React 18+?

easy

A. const root = ReactDOM.createRoot(document.getElementById('root')); root.render();

B. ReactDOM.render(, document.getElementById('root'));

C. ReactDOM.createRoot().render(document.getElementById('root'));

D. const root = ReactDOM.render(document.getElementById('root')); root.createRoot();

Solution

1. Step 1: Identify React 18+ render syntax

   React 18+ uses ReactDOM.createRoot with root.render to mount components.

2. Step 2: Match correct method calls and parameters

   const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); correctly calls createRoot with the DOM element, then calls render with the component.

3. Final Answer:

   const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<App />); -> Option A

4. Quick Check:

   ReactDOM.createRoot + root.render = correct syntax [OK]

Hint: Use createRoot on element, then call render with component [OK]

Common Mistakes:

• Using old ReactDOM.render syntax in React 18+
• Swapping parameters in createRoot or render
• Calling methods in wrong order

3. Given the code below, what will be displayed on the web page?

const root = ReactDOM.createRoot(document.getElementById('root'));
function Greeting() {
  return <h1>Hello, React!</h1>;
}
root.render(<Greeting />);

medium

A. Hello, React! inside an h1 heading

B. An empty page

C. Error: Greeting is not defined

D. The text 'Greeting' displayed

Solution

1. Step 1: Understand component definition and rendering

   The Greeting function returns an h1 element with text 'Hello, React!'.

2. Step 2: ReactDOM renders Greeting component inside 'root'

   Calling root.render with <Greeting /> displays the returned h1 content in the page.

3. Final Answer:

   Hello, React! inside an h1 heading -> Option A

4. Quick Check:

   Component returns h1 with text, so page shows it [OK]

Hint: Component returns h1 with text, so that text appears [OK]

Common Mistakes:

• Thinking component name shows as text
• Expecting error without import
• Assuming empty page without render

4. What is wrong with the following ReactDOM render code?

const root = ReactDOM.createRoot('root');
root.render(<App />);

medium

A. createRoot cannot be assigned to a variable

B. root.render should be called before createRoot

C. App component must be a class component

D. The argument to createRoot should be a DOM element, not a string

Solution

1. Step 1: Check createRoot argument type

   createRoot expects a DOM element, but 'root' is a string, not an element.

2. Step 2: Correct usage requires document.getElementById('root')

   We must pass document.getElementById('root') to get the actual DOM node.

3. Final Answer:

   The argument to createRoot should be a DOM element, not a string -> Option D

4. Quick Check:

   createRoot needs DOM element, not string [OK]

Hint: Pass DOM element, not string, to createRoot [OK]

Common Mistakes:

• Passing string id instead of element
• Calling render before createRoot
• Thinking component type matters here

5. You want to render a React component Dashboard inside a div with id app-root. You also want to ensure the component updates correctly when state changes. Which code snippet correctly sets up the ReactDOM render process for this scenario?

hard

A. const root = ReactDOM.createRoot('app-root'); root.render(Dashboard);

B. const root = ReactDOM.createRoot(document.getElementById('app-root')); root.render();

C. ReactDOM.render(, document.getElementById('app-root'));

D. const root = ReactDOM.createRoot(document.querySelector('#app-root')); root.render(Dashboard());

Solution

1. Step 1: Select the correct DOM element

   Use document.getElementById('app-root') to get the div element for rendering.

2. Step 2: Use ReactDOM.createRoot and root.render properly

   Call createRoot with the element, then render the component as JSX (<Dashboard />) to enable React updates.

3. Step 3: Avoid passing string or calling component as function

   Passing string or calling Dashboard() directly breaks React's rendering and update process.

4. Final Answer:

   const root = ReactDOM.createRoot(document.getElementById('app-root')); root.render(<Dashboard />); -> Option B

5. Quick Check:

   createRoot + render with JSX component = correct [OK]

Hint: Use createRoot on element, render JSX component for updates [OK]

Common Mistakes:

• Passing string instead of element to createRoot
• Using old ReactDOM.render in React 18+
• Calling component as function instead of JSX