What is Virtual DOM and Its Use in ReactJS

🧝Virtual DOM: “Ye Ek Aisa Jaadugar Hai Jo Dikhayi Nhi Deta, Lekin Sab Kuch Control Karta Hai!”

🤔Imagine you are writing a letter on paper, and you want to make a small change (like you have made a mistake and want to fix it).

🤔Will you rewrite the entire letter?
👎No, Right?
👍Instead, you just erase and correct that one word, or one line, or one sentence.
🤔Why?
⌛This saves time and effort!!

Now, think of the actual web page (Real DOM) as that piece of paper. If we update something in a normal webpage, the entire page reloads or repaints, which is slow.

But here, the Virtual DOM comes into the picture as a “Magician of our ReactJS life.”
“Virtual DOM - a smart copy of the real webpage that helps optimize updates.”

So now, you have a question in your mind:
What is this Virtual DOM, and what is this DOM even?

Let’s start with DOM:
DOM stands for Document Object Model. It is a programming interface that allows JavaScript to interact with HTML and XML documents. It’s a tree-like structure of objects that has nodes, and each node represents a part of the document.

Now, what is a Virtual DOM?
The Virtual DOM (VDOM), is like a shadow copy of the Real DOM that React maintains in memory. Instead of making direct changes to the actual webpage (Real DOM), React first updates the Virtual DOM, compares it with the previous version, and then applies only the necessary changes to the reveal webpage.

This process is called “Reconciliation,” and it makes React apps super fast and efficient.

🧬Real-Life Example: Fair Notebook Vs Rough Notebook

Imagine you are solving a math problem on a fair notebook and writing the same solution in a rough notebook.

1. 😐Real DOM: If you make a mistake on the fair notebook (real DOM), you either erase and rewrite the entire solution or cut the whole page and rewrite the entire solution on a new page — slow and inefficient.

2. 🧝Virtual DOM: Before writing in your fair notebook (real DOM), you first note down the solution in a rough notebook (virtual DOM). After verifying, you update only the changes/corrected parts in the fair notebook — much faster and optimized.

🤔Why is the Virtual DOM Useful?

✅Faster Performance: Only updates the changed parts instead of reloading the entire page.
✅Smooth User Experience: Reduces unnecessary rendering and prevents screen flickering.
✅Efficient Updates: Uses a process called “Diffing Algorithm” to compare old and new versions, applying minimal updates.

🛠️Illustration: How Virtual DOM Works?

The Virtual DOM works by creating an in-memory representation of the Real DOM, allowing developers to make changes without directly affecting the actual page. Here’s how it works:

1. Virtual DOM Creation: When the application state changes, the virtual DOM creates a new virtual tree.

2. Diffing Algorithm: The new Virtual DOM tree is compared with the previous version, and the differences (known as “diffs”) are calculated.

3. Batch Updates: Instead of updating the entire Real DOM, only the nodes that have changes are updated, leading to faster rendering.

As we know, the Virtual DOM uses a process called the “Diffing Algorithm,” but now we will see through code how it works.

1. Initial Render (Both Virtual DOM and Real DOM are the Same)

a) Real DOM (Your Screen):

<h1>Hello, User</h1>
<button>Click Me</button>

b) Virtual DOM (Stored in Memory, Same as Above):

<h1>Hello, User</h1>
<button>Click Me</button>

2. You Update the UI (Change “User” to “World”)

a) React updates the Virtual DOM first:

<h1>Hello, World</h1>  ✅ (Updated)
<button>Click Me</button>

• React compares th old and new Virtual DOM and finds that only <h1> changed.

• React updates only <h1> in the Real DOm instead of reloading everything!

⚙️Tech-Life Example: Google Docs Vs Notepad

Imagine you are typing in Google Docs vs Notepad:

📄Google Docs (Virtual DOM Approach)

• Only updates the changed words without refreshing the entire document.

• Super fast and efficient.

📒Notepad (Real DOM Approach)

• If you add or delete something, the whole file needs to be re-saved and reloaded.

• Slower and less efficient.

🗒️Note: Google Docs doesn’t use React Virtual DOM but has a similar optimization strategy (only updating necessary changes), whereas Notepad works similarly to Real DOM, where every change affects the entire document without optimization.

This is why React (with Virtual DOM) is much faster than regular HTML updates.

Now, you should have a question in your mind:

❓Which is created first — the Real DOM or the virtual DOM?

1. When a React app is first rendered, there is already an empty real DOM like <div id="root"></div> that already exists. This usually contains HTML structures, such as root element.

2. So when a React app starts, React creates a virtual DOM tree (React with JSX is converted to React.createElement() to create a virtual DOM tree), stores the result in memory, and then React compares the current Virtual DOM to the previous virtual DOM (if it’s the first time, the previous virtual DOM will be empty). React uses a process called Reconciliation for this activity.

3. After the reconciliation process is finished, React updates the actual DOM by inserting, updating, and removing elements.

🗒️Reconciliation Process: Core mechanism that efficiently updates the user interface (UI) by comparing a virtual representation of the UI (Virtual DOM) to the previous UI (Previous Virtual DOM), identifying the minimal set of changes needed to reflect state updates, and then applying those changes to real DOM, minimizing unnecessary re-renders and optimizing performance.

🤔When Should You Avoid Virtual DOM?

❌If you are building a small, static website.
❌If your app requires heavy animations or WebGL graphics.
❌If you need extremely low-latency real-time updates (e.g., gaming apps).

🔥Conclusion: “Virtual DOM = Smart Copy + Optimized Updates”

Think of the Virtual DOM as a middleman that keeps track of changes and applies only what is needed, making your app run smoothly without unnecessary reloading. It’s like updating a rough draft first, before making final changes to a clean document.

🔑In short: Virtual DOM = Smart copy, less reloading, better and faster performance.