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.