DEV Community

Discussion on: Virtual DOM in react

Collapse
 
aasthapandey profile image
Aastha Pandey • Edited

Hi, Thinh Vu
If you don't find it correct, would you mind correcting it.
If I don't write article how would I know whether I understand it or not because then only good people like you would be able to correct me.
Thanks in advance

Collapse
 
thinhvu profile image
Thinh Vu

The incorrect part is "a copy of real DOM".

VDOM is not a copy of real DOM, is just a plain javascript object (PJSO) which contains ~30 properties (depend on libraries implementation).

Mean while DOM is a huge object which contains more than 100 properties (included browser specific properties which we don't even need to care about).

FYI, you can console.dir($0) in console window to see DOM properties.

Diffing VDOM tree is faster than the DOM due to the less amount of properties and the time to traversal PJSO tree rather than the DOM tree.

So we'll get the benefit for using VDOM to detect the change (everytime state change and it happen a lot).

It's weird when someone think that update DOM over VDOM is faster than update the DOM. It's totally wrong because we also need to update the DOM after the diffing completed.

Thread Thread
 
aasthapandey profile image
Aastha Pandey

Actually, by copy I didn't mean the exact copy of Real DOM because it's obvious if it would be an exact copy of real DOM then how it could be virtual DOM.

What I forgot to mention was "excluding the heavy parts of real DOM*.

I think you focused more on that copy thing and ignored the rest of the things like I too have mentioned about javascript object, and in the entire post, I didn't mention anywhere that Virtual DOM is faster than Real DOM.

I had already edited the post when you pointed out before you replying to me, try to be soft-spoken and humble, trust me it won't harm.

Thank you so much for that extra knowledge about console.dir($0).