Open In App

What do you understand by Virtual DOM ?

Improve
Improve
Like Article
Like
Save
Share
Report

The Virtual DOM is an in-memory representation of the DOM. DOM refers to the Document Object Model that represents the content of XML or HTML documents as a tree structure so that the programs can be read, accessed and changed in the document structure, style, and content.

Prerequisites:

Let’s see how a document is parsed by a DOM. Consider the following sample HTML code.

<html>

<head>
<title>DOM example</title>
<body>
<div>
<h1>Document Object Model</h1>
</div>
</body>
</head>

</html>

The above code creates a tree structure as shown below:

DOM Structure

Now we got a basic idea of what DOM is, If you are still unsure about it please learn here.

Virtual DOM:

The name itself says that it is a virtually created DOM. Virtual DOM is exactly like DOM and it has all the properties that DOM has. But the main difference is Whenever a code runs JavaScript Framework updates the whole DOM at once which gives a slow performance. whereas virtual DOM updates only the modified part of the DOM. Let’s understand clearly:

When you run a code, the web page is divided into different modules. So, virtual DOM compares it with DOM and checks if there is any difference. If it finds a difference then DOM updates only the modified part and the other part remains the same. 

As shown in the above image, virtual DOM is different from DOM, now DOM updates the child components which are different and the other remains exactly the same. This increases the performance. 

Virtual DOM Key Concepts :

  • Virtual DOM is the virtual representation of Real DOM
  • React update the state changes in Virtual DOM first and then it syncs with Real DOM
  • Virtual DOM is just like a blueprint of a machine, can do changes in the blueprint but those changes will not directly apply to the machine.
  • Virtual DOM is a programming concept where a virtual representation of a UI is kept in memory synced with “Real DOM ” by a library such as ReactDOM and this process is called reconciliation
  • Virtual DOM makes the performance faster, not because the processing itself is done in less time. The reason is the amount of changed information – rather than wasting time on updating the entire page, you can dissect it into small elements and interactions

Now let’s see an example of how Virtual DOM works:

Steps to Create React Application:

Step 1: Create a react application with the following command.

npx create-react-app foldername

Step 2: Change your directory to the newly created folder with the following command.

cd foldername

Project Structure:

Project Structure

Example: This example implements a basic react app to show the working of Virtual DOM.

Javascript




// Filename: index.js
 
import React from "react";
import ReactDOM from "react-dom";
 
function time() {
    // DOM using HTML syntax
    document.getElementById("DOM_root").innerHTML =
        new Date().toLocaleTimeString();
 
    // Virtual DOM using react syntax
    const Virtual_element = React.createElement(
        "h4",
        null,
        "React DOM =  ",
        new Date().toLocaleTimeString()
    );
 
    ReactDOM.render(
        Virtual_element,
        document.getElementById("root")
    );
}
 
setInterval(time, 1000);


HTML




<!-- Filename: index.html -->
 
<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>React App</title>
</head>
 
<body>
    <div id="DOM_root"></div>
    <div id="root"></div>
</body>
 
</html>


Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Open your browser and right-click on the screen and select Inspect. You can see the following output.

As you can see from the above output, the whole div element is updating along with the time in the DOM. Whereas in virtual DOM only the h4 element is been updating and every other element is remaining the same. So this shows that virtual DOM finds the modified part and updates only that modified part.



Last Updated : 17 Nov, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads