Real DOM vs Virtual DOM in React
What is the DOM?
DOM (Document Object Model) is a programming interface for HTML and XML documents. It represents the structure of a webpage as a tree of objects, allowing JavaScript to access, modify, add, or remove elements dynamically.
When a browser loads an HTML document, it creates the DOM in memory.
Example:
<body>
<h1>Hello</h1>
<p>Welcome</p>
</body>
DOM Tree:
Document
│
html
│
body
├── h1
│ └── Hello
└── p
└── Welcome
JavaScript can manipulate these elements using methods like:
document.getElementById()
document.querySelector()
document.createElement()
document.removeChild()
What is Real DOM?
The Real DOM is the actual DOM created and maintained by the browser. Every HTML element becomes an object in memory.
Whenever JavaScript changes an element, the browser updates the Real DOM and may need to recalculate layout, repaint, and render the page again.
Example
<h1 id="title">Hello</h1>
document.getElementById("title").innerText = "Welcome";
The browser immediately updates the actual <h1> element on the webpage.
Problem with Real DOM
Imagine a webpage with 5,000 elements.
If only one button's text changes, the browser still needs to determine what changed, update the DOM, and potentially recalculate layout and repaint affected parts of the page.
Frequent DOM updates can become expensive because DOM operations are generally slower than working with plain JavaScript objects.
What is Virtual DOM?
The Virtual DOM is a lightweight JavaScript representation (copy) of the Real DOM.
It is not displayed on the screen. Instead, React uses it internally to determine what has changed before updating the browser's Real DOM.
When data changes:
- React creates a new Virtual DOM.
- React compares it with the previous Virtual DOM.
- It identifies only the changed elements.
- It updates only those elements in the Real DOM.
This comparison process is called Diffing, and the update strategy is known as Reconciliation.
Example
Initial UI
<h1>Hello</h1>
<p>React</p>
<button>Click</button>
Virtual DOM Copy
App
├── h1 → Hello
├── p → React
└── button → Click
After clicking a button:
<h1>Welcome</h1>
<p>React</p>
<button>Click</button>
React compares the old and new Virtual DOM.
It finds that only the <h1> text changed.
Instead of rebuilding the whole page, React updates only:
<h1>Welcome</h1>
The <p> and <button> remain untouched.
How React Updates the UI
State Changes
│
▼
Create New Virtual DOM
│
▼
Compare with Old Virtual DOM
│
▼
Find Differences (Diffing)
│
▼
Update Only Changed Elements
│
▼
Real DOM Updated
Real DOM vs Virtual DOM
| Feature | Real DOM | Virtual DOM |
|---|---|---|
| Meaning | Actual DOM maintained by the browser | Lightweight JavaScript copy of the Real DOM |
| Location | Browser memory | JavaScript memory |
| Update Speed | Comparatively slower for frequent updates | Faster because React computes changes in memory first |
| Update Method | Updates the actual DOM directly | Compares two virtual trees, then updates only necessary parts of the Real DOM |
| Rendering | Browser handles rendering directly | React optimizes updates before the browser renders |
| Performance | Can become slower with many repeated updates | Improves efficiency by minimizing direct DOM operations |
| Used By | Vanilla JavaScript | React |
Real-Life Analogy
Imagine you are editing a 500-page book.
Real DOM
You erase and rewrite directly in the original printed book every time you find a mistake.
Even a small correction means working on the actual book.
Virtual DOM
You first make corrections on a photocopy.
Then you compare the photocopy with the original.
Finally, you update only the pages that actually changed.
This saves time and avoids unnecessary work.
Why React Uses Virtual DOM
- Reduces unnecessary DOM updates.
- Improves application performance for frequent UI changes.
- Makes user interfaces more responsive.
- Updates only the required elements instead of the entire page.
- Provides a declarative way to build interactive interfaces.
Top comments (0)