The Virtual DOM: An In-Memory Shadow of the Real DOM

Working on Virtual DOM

If you’re a beginner front-end developer, you might find the concepts of DOM (Document Object Model) and Virtual DOM (Virtual Document Object Model) a bit confusing. This article will help you understand what they are, how they differ, and how they’re used in React. Let’s dive in!

🧐 What does DOM mean in Web Development?

DOM, or Real DOM, is an acronym for Document Object Model and is like the blueprint of our web application’s user interface (UI). It represents the structure and content of a website as a tree. When our app changes, the DOM updates to show those changes.

Now, the problem with DOM is that it’s slow. Unlike today’s fast and dynamic websites, DOM was originally designed for static sites rendered by the server. With modern websites doing their rendering in the browser, using React DOM for them can be sluggish. That’s where the Virtual DOM comes in.

🤩 What is Virtual DOM?

Virtual DOM is a lightweight representation of the Real DOM. It’s like a blueprint of the UI that exists in memory, separate from the actual DOM. This allows React to make changes to the UI without directly affecting the real DOM, making it more performant.

🧐 But Why is Virtual DOM Faster?

When new elements are added to the UI, it creates a new Virtual DOM tree. On the tree, the elements are represented by coloured spots. If any of the elements change, it creates a new tree. We then compare the new tree to the former tree to see which method is best to apply changes to the DOM.

Here’s a visual representation of the explanation:

🏋️‍♀️ How do DOM and Virtual DOM work in React?

1. When changes occur in the application state, React first updates the Virtual DOM. This process is significantly faster than directly manipulating the DOM, as it doesn’t involve interacting with the browser’s rendering engine.
   Note: React has two Virtual DOMs — a current one and a new one after changes.
2. Once the Virtual DOM has been updated, React performs a process called reconciliation. Reconciliation involves comparing the updated Virtual DOM to the previous version and identifying the minimal set of changes required to synchronize the two representations.
3. This comparison process, known as diffing, ensures that only the necessary updates are applied to the actual DOM.

[ To further optimize reconciliation, React introduced the concept of fibres that have a reconciliation algorithm. Fibre works by breaking down the work of updating the Virtual DOM into smaller, prioritized chunks or “fibres”, which can be processed incrementally by the browser’s rendering engine. ]

DOM and Virtual DOM working

🎥 Recap

• You make a change in your React app.
• React swiftly updates the Virtual DOM.
• Reconciliation & Diffing: A clever before-and-after comparison occurs between the updated and previous Virtual DOM.
• React determines the most efficient way to update the real DOM based on the differences.
• Only the necessary parts of the real DOM receive attention.

🤩 The Benefits of Virtual DOM

1. Performance Optimization: Instead of directly making changes to the DOM and re-rendering the entire thing, the Virtual DOM boosts performance by making the changes only to the required nodes.
2. Reduced Memory Consumption: The Virtual DOM’s lightweight nature minimizes memory usage compared to direct DOM manipulation.

🔥 FAQ

1. Is Virtual DOM only used in React?
   → No, the Virtual DOM concept is not exclusive to React other libraries and frameworks, such as Vue.js also leverage a Virtual DOM or similar abstraction for efficient UI updates.
2. How does the Virtual DOM impact the load time of a web application?
   →While the Virtual DOM might not have a direct impact on the initial load time of a web application, it helps the site run faster during user interactions and subsequent updates.
3. What role do “keys” play in optimizing the reconciliation process?
   → In React, “keys” are like tags that help React keep track of elements when things change. They’re important because they make it easier and faster for React to figure out which elements changed, got added, or got removed.

📚 Earlier Post:

👉 The Art of Lazy Loading
👉 Inner Workings of Browsers and Websites
👉 The Browser Rendering Process

🔍 Coming up next:

👉 Class Components
👉 Functional Component
👉 useState Hooks

Stay tuned for more insights into the world of Web development! 🚀📦

🤝 Let’s connect on LinkedIn: https://www.linkedin.com/in/omkarbhavare/