Hey React, What is the Virtual DOM?

React

When you start learning React, the first concept to understand is Virtual DOM. But before we jump into Virtual DOM, let’s see what is DOM itself.

“The Document Object Model (DOM) is a programming interface for HTML and XML documents. It represents the page so that programs can change the document structure, style, and content. The DOM represents the document as nodes and objects. That way, programming languages can connect to the page.

A Web page is a document. This document can be either displayed in the browser window or as the HTML source. But it is the same document in both cases. The Document Object Model (DOM) represents that same document so it can be manipulated. The DOM is an object-oriented representation of the web page, which can be modified with a scripting language such as JavaScript.” — Mozilla Developer Network

So, in layman’s language, DOM stands for Document Object Model. It is the structure representation of all nodes in HTML document. DOM provides a way for JavaScript to interact with every single node in an HTML document to manipulate it.

What is Node?

Everything in a real DOM is a node. The document itself is the main node — document node. All HTML elements are element nodes. All HTML attributes are attribute nodes. Text inside HTML elements are text nodes. Comments are comment nodes.

Nowadays, the web is moving more towards SPAs — Single Page Applications. My website www.himachitalia.com is a perfect example of SPA. It looks beautiful but loading speed may be compromised if you have large files or more content on your website.

The other problem of a real DOM is that if you have a list of 10 items on your web page and if because of any user interaction, web page just needs to update one of them, that’s not possible. In this case, the entire real DOM will be re-rendered. Just to update one item of the list of 10 items, entire list will be re-rendered. It’s 10 times more work than what is needed. It could not only affect any other ongoing user’s interaction on the web page but also have its effects on bandwidth.

These problems can be solved using Virtual DOM. Let’s see how.

Virtual DOM

The Virtual DOM is an abstraction of the HTML DOM. It is lightweight and detached from the browser-specific implementation details.

I read a very simple definition of Virtual DOM on Accelebrate.com — Like the actual DOM, the Virtual DOM is a node tree that lists elements and their attributes and content as objects and properties. React’s render() method creates a node tree from React components and updates this tree in response to mutations in the data model, caused by actions.

In simple language, the Virtual DOM is React’s local copy of the HTML DOM. It allows React to do its computations and skip the real DOM operations.

Steps till changes in real DOM

• To allow React to create a Virtual DOM, you will need React’s Components
• To make any HTML code a static React Component, you just need to return HTML Code in React’s render() method
• You will need to replace class attribute name to className of HTML elements in render() method — because class is a reserved word in JavaScript
• The React Component gets converted to the React Element
• Whenever React renders React Elements, every single virtual DOM object gets update
• Once the virtual DOM has updated, then React compares the virtual DOM with a virtual DOM snapshot that was taken before the update finds out exactly which virtual DOM objects have changed. This process is called — diffing
• Now is the time for React to update real DOM for only those objects which are changed in Virtual DOM.

At this point you may think that just like normally on any change browser update real DOM, after render() method, React anyway update Virtual DOM completely. So, how it could be more efficient? Well, that’s the magic of Diffing Algorithm. But for sure, it is done faster than it would be in the regular DOM.

Any suggestion or question on this article, please feel free to write me at hima.chhag@gmail.com or in comment section below.

Happy Coding!