Roktim Kamal Senapoty

Posted on Jun 23, 2023 • Edited on Jul 1

DOM vs Virtual DOM: How React is Revolutionizing Web Development

#javascript #webdev #react #programming

Introduction

Web development 🌐 is constantly evolving 🔄, and technologies 💻 are emerging as game-changers ♟️. Enter React ⚛️: a powerful 💪 and popular JavaScript library that is changing the way we think about developing web applications 🌐. One of the standout features of React is its Virtual DOM technology. In this article 📝, we will explore 🧐 the difference between DOM 📖 and Virtual DOM 💾, why Virtual DOM is important in web development 🌐, and how React ⚛️ is revolutionizing the field 🚀.

Why is React important in web development?

React has become a go-to choice🚀 for front-end web development due to its many advantages. It is lightweight, modular, and scalable, which makes it versatile and efficient. React also simplifies web development by breaking down complex applications into easy-to-manage components💪.

DOM vs Virtual DOM

Before we dive into how React uses Virtual DOM, it's important to understand what DOM is and how it works.

Understanding DOM⚡️

What is DOM?👀

The Document Object Model (DOM) is a fundamental concept in web development. Essentially, it is the programming interface for HTML and XML documents. It provides a way for programs to access and manipulate the structure and content of these documents.

How does DOM work?🤔

When a web page is loaded, the browser creates a document object model of the web page. The DOM represents the page as a structured document with a hierarchical tree-like structure. Each element on the page is represented as a node in the tree, with child nodes representing nested elements.

How does DOM affect web performance?♻️

Manipulating the DOM can be resource-intensive, and it can slow down the performance of web applications. This is especially a problem in complex applications with a large number of elements.

Introducing Virtual DOM👑

What is Virtual DOM?

Virtual DOM is a lightweight, in-memory representation of the actual DOM. It enables React to efficiently update and manipulate the user interface without needing to access the actual DOM. Instead, React updates the Virtual DOM, which then updates the actual DOM with only the changes that need to be made.

Lets see how it works:📌

Virtual DOM: When you render your React components, React creates a lightweight representation of the actual DOM called the Virtual DOM. It's a JavaScript object that mirrors the structure of the real DOM.
Initial Rendering: When you first load your React application, React performs an initial rendering of your components to create the Virtual DOM.
Render Changes: When a change occurs, such as user input or data update, React re-renders the affected components and generates a new Virtual DOM.
Diffing Algorithm: React's diffing algorithm compares the previous Virtual DOM with the newly generated one. It identifies the exact changes that need to be made to the actual DOM to reflect the updated UI.
Update the DOM: React applies only the necessary changes to the real DOM, minimizing the number of operations required. This makes the updates fast and efficient.
Example: Imagine you have a photo gallery component in your React app. If a user clicks on a thumbnail to view a different photo, React will update only the necessary parts of the DOM, like swapping the displayed image and updating captions. It won't reload the entire page or make unnecessary changes.
Improved Performance: By leveraging the Virtual DOM and performing targeted updates, React optimizes performance. It avoids expensive re-renders of unchanged components and focuses only on what needs to be updated.

How does Virtual DOM differ from DOM?🛠️

The key difference between DOM and Virtual DOM is that Virtual DOM is lightweight and in-memory, whereas DOM is the actual structure of the web page. Updating the Virtual DOM is much faster than updating the actual DOM, as it requires fewer resources. It essentially syncs the virtual DOM with the DOM. It also means that React only changes the DOM once. This whole process of comparing and changing the virtual DOM to the eventual DOM manipulation is called reconciliation.

Why is Virtual DOM important in web development?💯

By using Virtual DOM, React avoids the resource-intensive and often slow process of manipulating the actual DOM. This results in faster updates and better performance, which improves the user experience.

Advantages of Virtual DOM🔥

Virtual DOM has several advantages that make it an important technology in modern web development.

Improved Web Performance🚀

Because Virtual DOM can update the actual DOM with only the changes that need to be made, it is much faster than traditional DOM manipulation. This results in better web performance and faster load times.

Efficient Rendering✅

Virtual DOM enables efficient rendering by minimizing the number of updates needed to the actual DOM. This reduces the overall workload and resources required to render a web page.

Better User Experience😌

With fast web performance and efficient rendering, the user experience is improved. Users expect web applications to be responsive and quick, and Virtual DOM is one key technology that makes this possible.

React and Virtual DOM

React leverages Virtual DOM technology, utilizing a fast diffing algorithm to efficiently update the actual DOM. This makes React components lightweight and fast, enhancing overall performance and user experience. React's flexibility and ease of use, combined with its supportive community, set it apart in the world of web development.

Conclusion

React is a game-changer🔥 in the world of web development🌐, thanks in large part to its ability to leverage Virtual DOM technology💻. By using Virtual DOM, React improves web performance🚀, enhances user experience😃, and simplifies complex applications into easy-to-manage components🧩. As technology continues to advance📈, Virtual DOM is poised to become even more important in the future of web development🔮.

Follow Roktim for more of these!❤️

Top comments (16)

Dwayne Charrington • Jun 23 '23

The Virtual DOM was a revolutionary concept back in 2014, but it's actually not as efficient as other techniques. Aurelia and Svelte, for example, employee a reactive binding system that runs circles around Virtual DOM. When you actually look at how Virtual DOM works, you'll learn it's just a glorified dirty-checker.

I believe that React despite its popularity, is not the best option in 2023.

Jon Randy 🎖️ • Jun 23 '23

React is one of the slower front end frameworks

Ivan Jeremic • Jun 25 '23

Don't get fooled by some tweets you read, you are not really up to date, the virtual dom in 2023 had now a nice comeback, you need to read about blockdom & million.js which are vdoms of the new generation, faster and smaller than svelte or signal stuff.

Eckehard • Jun 23 '23

The key difference between DOM and Virtual DOM is that Virtual DOM is lightweight and in-memory, whereas DOM is the actual structure of the web page. Updating the Virtual DOM is much faster than updating the actual DOM, as it requires fewer resources.

So, where precisels does the DOM reside? Yes: also in memory... And the DOM is pretty fast and efficient too.

This is belive of many REACT users that VDom is fast, but it is not true. VDOM brings you a lot of overhead, and every operation to be performed on the DOM has to be performed on the VDOM first, so i doubles your effort. In fact, even if you do not change anything, the VDOM might force you to compare the whole DOM tree, which needs a lot of calculation power. So, it is only a fairy tail that VDOM is fast.

BUT: Dom Manipulation is only a small part of the work of a browser. After the DOM was changed, the browser has to reRender the page, and this is the really slow task. It often takes a factor of 10-1000 longer than the pure DOM manipulation.

So: you can save some time, if the VDOM prevents you from unnecessary redraws. But today there are many frameworks out there, that have a better approach than the "brute force DOM diffing" implemented in REACT. Svelte compiles the redraw logic, so all the DOM manipulation can be more precise. But even if we use frameworks like VanJS, that work directly on the DOM, we find that browsers handle DOM redraw very efficient, so it is not clear if VDOM still has any advantage. It just helps you to continue to write bad designed web applications, that do not care for state changes at all...

FJones • Jun 24 '23

VDOM diffing + bulk DOM manipulation beats DOM diffing + DOM manipulation, in part because abstracting away the DOM intricacies and collecting changes before applying them helps. But it's vastly slower than targeted DOM manipulations, and the optimizations that went into DOM render cycles have reduced the drawbacks of direct DOM operations significantly.

Nothing beats tailored solutions on performance, and frameworks that try to approximate those tailored solutions will necessarily beat the React approach. React does have its benefits, but they're rapidly dwindling, so the main reason to keep using React ends up being the established legacy - more mature ecosystem, more retained experience, more existing codebases.

For new blank slate projects, svelte is quickly becoming the tool of choice, and for good reason (much as I personally have at this point too much fatigue to make another technology switch for a while).

artydev • Jun 24 '23 • Edited

Bé self confident, if you are not building a Facebook like app,
React is certainly not the best choice...
Sée what you can accomplish with a only 1.2k : VanJS

Ara Ara no Mi • Jun 25 '23

VanJS doesn't look good though, you can't use tags because they are functions.

artydev • Jun 25 '23

Look at this dev.to/artydev/vanjs-flavours-51ha

Ara Ara no Mi • Jun 29 '23

I just did, it doesn't look intuitive to use.

artydev • Jun 29 '23 • Edited

And this one ? Demo:

import van from "./van.js"
import html from "./htm.js"

const state = van.state

function Counter (name) {
  let count = state(0)
  return html`
    <div>
      <h1>Counter ${count}</h1>
      <button onclick=${() => count.val++}>INC</button>
      <button onclick=${() => count.val--}>DEC</button>
    </div>`
}

document.body.append(Counter())

Ara Ara no Mi • Jul 2 '23

That one looks better.

artydev • Jul 2 '23 • Edited

Glad🙂

All this, in less than 2k!!, no bundling,
no hundred of kilobytes npm packages

You master totally your script and don t rely on cryptics concepts...

VanJS doesn't claim to
replace React, Angular or Vue
But for many projects you can avoid them...

Ara Ara no Mi • Jul 6 '23

I'd still rather use Vue, it's the easiest front-end framework to learn and understand. I don't care that much about bundle size (we tree-shake our apps though) unless I'm told we need to make our website fast on third-world countries with slow 3g internet connections.