Virtual DOM

#webdev #javascript #beginners #tutorial

Hi everyone, my name is P Swyom Sanjog. Welcome back to my blog—I hope you’re all doing well. Today, I’m bringing a new topic: Virtual DOM. Let’s understand what the Virtual DOM is in simple terms. We’ll cover key questions like what it is, why it’s used, and how it works. So, let’s get started!

Virtual Dom

So, let’s break down the topic into “Virtual” and “DOM.”

Virtual means something that exists digitally it’s not physically present but acts like a copy of a real object.
DOM (Document Object Model), in simple terms it is a programming interface for the web pages and it represents the entire HTML document in a tree structure of objects.

so virtual Dom is a type of interface where it compare the changes with old Dom of the system or in simple term "an interface efficiently tracking changes in a lightweight copy of the real object."

Why the Virtual Dom exist ? what the need of it ?

Imagine you’re editing a document.You just want to change one word, but instead of editing that word, you rewrite the entire page every time. which is a slow process. That’s exactly how the real DOM can behave.

The Virtual DOM is like a smart middle layer.It doesn’t replace the real DOM—it just makes working with more efficient, faster, and smoother.

The virtual Dom is necessary because it make the web apps faster and smarter by avoiding unnecessary updates. lets take a real life example imagine :

Real DOM → Writing directly on the final exam paper.
Virtual DOM → First writing on rough paper then correct the mistakes then write only the final answer .

Simple mini Project based on Virtual DOM concept

result :

When you click the Increment or Decrement button, React doesn’t reload the whole page. Instead of it updates the count using useState, and then quickly creates a new version of the UI in memory this is called the Virtual DOM . It compares this new version with the previous one and notices that only the number has changed. So instead of rebuilding everything, React updates just that small part of the count text on the screen. This makes the app feel fast and smooth because only the necessary change is applied, not the entire UI.

Simple Conclusion

**
React DOM helps in rendering the page on the browser faster than the native HTML pages. By only changing the specific part of the DOM tree rather than re-rendering the entire tree again .

That is the core reason why Virtual DOM manipulation is prefferred over Real DOM manipulation.