Hey React, What is the Virtual DOM?
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.
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.
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
- You will need to replace
classattribute name to
classNameof HTML elements in render() method — because
- The React
Componentgets converted to the React
- 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 email@example.com or in comment section below.