DEV Community

loading...

Discussion on: What is Virtual DOM? How Virtual DOM works ? What is Reconciliation ? What is diffing algorithm? What makes React so fast ?

Collapse
inhuofficial profile image
InHuOfficial • Edited

Any reason to delete my comment? The below is the original comment and is designed to be useful to your post and understanding not as any criticism! I wouldn't have hearted your post if I thought it wasn't good 😀

Virtual Dom is slower than the actual DOM and vanilla DOM manipulation.

Where the benefits come are from the fact that if you update 5 different items the virtual DOM can be used as a tool to automatically decide exactly what needs to change.

Doing document.querySelector(#someID).innerHTML = "apple" will be magnitudes faster than any framework as you have the overhead of calculating the differences in the virtual DOM before and after in a framework.

The virtual DOM is useful if you don't know what element will change before hand, which is why it is used and necessary for frameworks like React.

All that React is doing "under the hood" is automatically isolating elements that need updating.

So in the example you gave of a comment being added needing to repaint the whole DOM that is nonsense. You can just do document.querySelector('#comments').appendChild(ourNewElement); and that will not repaint the whole UI, just the bit that needs updating and any content below it - that is all that frameworks are doing in the background, but in a way that makes our life much easier as developers!

Collapse
koolkishan profile image
Kishan Sheth Author

That was very unprofessional of me to delete your comment. I apologise for that. Thank You for pointing this out.

Collapse
inhuofficial profile image
InHuOfficial

Nah don't worry, I can see from how I phrased it it looked like an attack, that is why I added the first bit! Enjoyed the article! ❤

Some comments have been hidden by the post's author - find out more

Forem Open with the Forem app