What is the difference between the Real DOM and Virtual DOM?

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

DOM stands for Document Object Model. You may hear it referred to as the Real DOM or HTML DOM. It is the representation of your document and how your HTML and XML documents are read by the browser. Elements of HTML (starting from <HTML> as the main root and then <head> and <body> and then down to things like <h1>, <p>, etc.) are nodes in the DOM. This forms a tree-like structure and is an object-oriented representation of your web page that can be manipulated by scripting languages like JavaScript. The DOM itself is not a programming language, but rather a programming interface.

DOM
The “treelike” structure of the DOM. Picture from https://www.w3schools.com/

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.

said React and its Virtual DOM, probably

So there you have it! The differences and similarities of Real DOM and Virtual DOM. Thanks for reading!