Confused about Virtual DOM

Question

Virtual DOM/DOM tree state in steps

So I've stumbled upon this image recently and I'm a bit confused about part where Virtual DOM state is applied to the real DOM. So let's say we changed <div> to a <header> in our React code, this change would be applied to Virtual DOM and then whole subtree would be re-rendered. But in Vanilla JS I could do the very same thing and subtree would be re-rendered aswell? So do I understand correctly that Virtual DOM duty among other things is to abstract real DOM operations we would need to do?

Would correct/efficient HTML DOM manipulations have same effect as working with Virtual DOM in complex applications?

Answer 1

I'm not sure I fully understand your questions but I'll try to answer as fully as I can.

React works in Virtual DOM, which means it has a copy of the real dom and whenever it detects a change, it sees what the difference is and only rerenders that component and it's children in the subtree, NOT the whole one. The way React detects change is through props. If the props of a component has been changed, it rerenders the component. One way you could evade unnecessary re-renders of the children is if you use PureComponents, ShouldComponentUpdate, or the new memo and memo hooks. (memoization).

Also, the one other difference between normal(JavaScript) DOM and virtual DOM is that Virtual DOM is made up of objects and normal DOM is made of arrays. So, in arrays, search time is O(n) and in objects, it's constant time O(1) and that's why it is way faster

Answer 2

So do I understand correctly that Virtual DOM duty among other things is to abstract real DOM operations we would need to do?

Yes.

Would correct/efficient HTML DOM manipulations have same effect as working with Virtual DOM in complex applications?

Yes.

You're right. A virtual DOM ultimately translates to calls to the real DOM. Therefore, the virtual DOM can only ever be slower than optimal usage of the real DOM. If you're adding, removing, moving elements on the actual DOM in a way that actually represents what changes you're making, it will be efficient.

Then why does Virtual DOM exist?

People invented virtual DOM to abstract away "how things are changing" and instead think about "how things are currently." The architecture of things like React and Vue is basically that components have the code to declare the way that the DOM should currently look. Then the code in these frameworks does a big re-computation of how they think things should be, then it diffs it against how the components said things should be the last time it asked them, then it applies that diff to the real DOM.

So, virtual DOM is a way to ameliorate the inherent slowness of this design, under the belief that its benefits will outweigh the costs.

Sources

• https://svelte.dev/blog/virtual-dom-is-pure-overhead
• https://medium.com/@hayavuk/why-virtual-dom-is-slower-2d9b964b4c9e

Answer 3

I hope this will clarify your doubts about the virtual DOM without going too much in detail.

Real DOM

• It updates slow.
• Can directly update HTML.
• Creates a new DOM if element updates.
• Uses a lot of memory resource.

Virtual DOM

• Updates faster and it's light-weight.
• Can't directly update HTML.
• Updates the JSX if element updates.
• Increased performance as uses less memory