Rendering & Virtual DOM

What is Rendering?

Rendering is the process where React runs your component function (or render method) to determine what the UI should look like for the current state and props, producing a Virtual DOM tree.

Rendering does not mean updating the browser DOM — it only means computing the UI description.

State / Props change
        ↓
Render phase
(component function runs)
        ↓
New Virtual DOM created
        ↓
Diff with old Virtual DOM
        ↓
Changes found?
   ├─ No → stop
   └─ Yes → commit phase
                 ↓
           Update real DOM

• Rendering does not update the real DOM
• Rendering only produces a UI description (Virtual DOM)
• That description is later used to decide DOM updates

What is a Virtual DOM?

Common definition:

"Virtual DOM is an in-memory representation of the real DOM"

My definition:

A pure JavaScript object tree that describes what the UI should look like, independent of the browser.

What Virtual DOM is NOT

Virtual DOM is not:

• A copy of the real DOM
• A browser structure
• Something with layout or styles computed
• Something the browser understands

The browser never sees Virtual DOM.

Concrete example

JSX:

<h1 className="title">Hello</h1>

Virtual DOM (conceptually):

{
	type:"h1",
	props: {
		className:"title",
		children:"Hello"
  }
}

This is just data.

No width.

No height.

No pixels.

No layout.

Why "representation of real DOM" is misleading

Because:

• Virtual DOM can exist without any real DOM
  • Server rendering
  • React Native
• Virtual DOM may describe UI that never gets rendered
• It's possible to render Virtual DOM multiple times without touching real DOM

So it's better to say:

Virtual DOM represents intended UI, not actual DOM.

Correct mental model

State
  ↓
Render
  ↓
Virtual DOM (UI description)
  ↓
Diff (reconciliation)
  ↓
Real DOM mutations (if needed)

Key Takeaway

Rendering is React calling your component to produce a Virtual DOM — a plain JavaScript object describing intended UI. It never touches the real DOM directly. The Virtual DOM is not a copy of the browser DOM; it is a lightweight UI description that React later diffs to determine the minimal real DOM changes needed.