DEV Community

DOM vs Virtual DOM: How React is Revolutionizing Web Development

Roktim Kamal Senapoty on June 23, 2023

Introduction Web development 🌐 is constantly evolving 🔄, and technologies 💻 are emerging as game-changers ♟️. Enter React ⚛️: a powerful...

Read full post

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.

artydev • Jul 6 '23

I understand...
Personnaly, I don't want to fill my device with tons of npm packages I don't control every time I create a new javascript project...

Dauda Lawal • Jun 23 '23

Nice article, thanks for sharing.

fruntend • Jun 26 '23

Сongratulations 🥳! Your article hit the top posts for the week - dev.to/fruntend/top-10-posts-for-f...
Keep it up 👍