# Virtual DOM is pure overhead

DevFeed: [Virtual DOM is pure overhead](<https://devfeed.tech/articles/virtual-dom-is-pure-overhead-3055.md>)

Original publisher: [Read original article](<https://svelte.dev/blog/virtual-dom-is-pure-overhead>)

Author: Rich Harris

Published: 2018-12-27T00:00:00Z

Content type: opinion

Language: en

Sources: [Svelte blog](<https://devfeed.tech/sources/svelte-blog.md>)

Topics: [Document Object Model (DOM)](<https://devfeed.tech/topics/dom.md>), [React](<https://devfeed.tech/topics/react.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [Framework](<https://devfeed.tech/topics/framework.md>)

Tags: [frameworks](<https://devfeed.tech/tags/frameworks.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [performance](<https://devfeed.tech/tags/performance.md>), [react](<https://devfeed.tech/tags/react.md>)

## AI overview

The article examines the claim that the virtual DOM is faster than the real DOM. It explains how frameworks such as React create and reconcile virtual DOM representations, argues that this work is additional overhead, and questions the promise that entire applications can be re-rendered on every state change without performance concerns.

## Source excerpt

If you've used JavaScript frameworks in the last few years, you've probably heard the phrase 'the virtual DOM is fast', often said to mean that it's faster than the real DOM. It's a surprisingly resilient meme -- for example people have asked how Svelte can be fast when it doesn't use a virtual DOM. It's time to take a closer look. What is the virtual DOM? In many frameworks, you build an app by creating render() functions, like this simple React component: function function HelloMessage(props: any): divHelloMessage(props: anyprops) { return <type div = /*unresolved*/ anydiv className="greeting">Hello {props: anyprops.name}</div>; } You can do the same thing without JSX... function function HelloMessage(props: any): anyHelloMessage(props: anyprops) { return React.createElement('div', { className: stringclassName: 'greeting' }, 'Hello ', props: anyprops.name); } ...but the result is the same -- an object representing how the page should now look. That object is the virtual DOM. Every time your app's state updates (for example when the name prop changes), you create a new one. The framework's job is to reconcile the new one against the old one, to figure out what changes are necessary and apply them to the real DOM. How did the meme start? Misunderstood claims about virtual DOM performance date back to the launch of React. In Rethinking Best Practices, a seminal 2013 talk by former React core team member Pete Hunt, we learned the following: This is actually extremely fast, primarily because most DOM operations tend to be slow. There's been a lot of performance work on the DOM, but most DOM operations tend to drop frames. Screenshot from Rethinking Best Practices at JSConfEU 2013 But hang on a minute! The virtual DOM operations are in addition to the eventual operations on the real DOM. The only way it could be faster is if we were comparing it to a less efficient framework (there were plenty to go around back in 2013!), or arguing against a straw man -- that the alternat