Virtual DOM

Source: Dev.to

What is the Virtual DOM?

The Virtual DOM (VDOM) is a lightweight, in‑memory representation of the real DOM.
It acts like a digital copy of the actual DOM tree, allowing changes to be compared against a previous version before updating the real DOM.

• Virtual – something that exists digitally, not physically, but mimics a real object.
• DOM (Document Object Model) – a programming interface that represents an HTML document as a tree of objects.

The VDOM efficiently tracks changes in this lightweight copy and determines the minimal set of updates needed for the real DOM.

Why does the Virtual DOM exist?

Updating the real DOM directly can be slow because it often requires re‑rendering large portions of the page, even for tiny changes (e.g., changing a single word). The Virtual DOM solves this by:

• Reducing unnecessary updates – only the parts of the UI that actually changed are modified.
• Improving performance – fewer DOM operations mean faster, smoother web applications.
• Providing a predictable update cycle – changes are batched and applied in an optimized way.

Real‑world analogy

• Real DOM → Writing directly on the final exam paper (every change requires rewriting the whole page).
• Virtual DOM → Working on a draft, then copying only the necessary edits onto the final paper.

How the Virtual DOM works in React

When a component’s state changes (e.g., clicking an Increment or Decrement button), React:

1. Updates the component’s state using useState.
2. Creates a new virtual representation of the UI in memory.
3. Compares this new VDOM tree with the previous one (a process called reconciliation).
4. Determines the minimal set of changes needed.
5. Applies only those changes to the real DOM.

This selective updating makes the app feel fast and smooth because only the necessary part of the UI (e.g., the count text) is re‑rendered, not the entire page.

---

Key takeaway: Manipulating the Virtual DOM is preferred over direct Real DOM manipulation because it minimizes work, boosts performance, and provides a smoother user experience.