Maybe you’ve just started learning React and you see the term Virtual DOM thrown around. What is it and how is it different than good ole regular, Real DOM? Read on to find out!
But first, let’s review what Real DOM is
So….what’s the Virtual DOM then?
Real DOM allows for easy navigation through a webpage, but it’s not necessarily quick. Webpages hold a LOT of information with a ton of HTML elements, making for one big tree. Single page applications (SPAs) call for even more frequent DOM manipulation. This is where the Virtual DOM (VDOM) comes in handy.
The VDOM was not something invented by React, but it is something that React uses. The VDOM is an abstract representation of the Real DOM (I know what you’re thinking because I’m thought it too, a representation of a representation? But WHY?). ReactElements make up the VDOM and are the nodes. Similarly to the nodes in Real DOM, ReactElements are HTML elements. The VDOM is kept in memory and then synched with the Real DOM whenever new changes are rendered. It’s basically React’s own local, lightweight copy of the Real DOM. Because React doesn’t read the Real DOM and updates and renders only the elements that change in the DOM, its a lot faster.
So there you have it! The differences and similarities of Real DOM and Virtual DOM. Thanks for reading!