Using React Virtual DOM To Improve Web Application Performance

What is a Virtual DOM?

In simple terms, Virtual DOM is a lightweight in-memory representation of a web page’s user interface (UI) or Core DOM. Many JavaScript frameworks and libraries, such as React, Angular, and Vue.js, use a virtual DOM.

Since manipulating or updating the Core DOM directly can make a web application slow, especially when there are frequent changes to the user interface, a Virtual DOM is used to improve its performance by avoiding unnecessary updates to the Core DOM.

When the user interface of a web application using a Virtual DOM is rendered for the first time, a version of a Virtual DOM is created as a copy of the Core DOM and stored in memory. Every time a change is made to the user interface, a new version of Virtual DOM is created.

Through a process called diffing, a JavaScript library or framework compares the new version of the Virtual DOM to the previous version and only updates the parts of the Core DOM that have changed.

Assume the user interface, or the Core DOM, is a real house. If you want to change the house, like changing the windows, you have to rebuild the house from the ground up. Rebuilding the house from the ground up every time a change needs to be made can be expensive and time-consuming.

Now take the small house on the top left below as the plan of the house. If you want to add new windows or change the house, you can ask an architect to draw a new plan with the new changes. Then you give the builders the new plan of the house, which they compare to the old plan to check the changes that need to be made to the house.

After confirming the new changes, they only make the changes to the house without rebuilding it from the ground up.

Note: Automate your JavaScript test cases across 3000+ real browsers and OS. Try TestMu AI Now!

Advantages of using a Virtual DOM in a web application

Some of the advantages of using a Virtual DOM in a web application are:

• Improved Performance
  The Virtual DOM avoids unnecessary updates and re-rendering of a web application user interface every time a change is made, hence making the web application fast and more efficient.
• Better User Experience
  The Virtual DOM improves a web application’s user experience by reducing latency. When re-rendering the web application user interface, the Virtual DOM preserves the state of some user interface elements, such as input fields hence the user can add data to the fields smoothly without losing it every time the user interface is re-rendered.
• Better CPU and Memory Consumption
  The Virtual DOM reduces a web application’s CPU and memory consumption compared to Core DOM because a Virtual DOM is a lightweight in-memory representation of a web application user interface or Core DOM.

The Virtual DOM minimizes the number of DOM updates when there is a change in a web application user interface. The reduced unnecessary updates lead to reduced CPU time which is the amount of time a CPU uses to process instructions of the web application.

Understanding the Document Object Model (DOM)

The Document Object Model (DOM) is a programming language-neutral interface the browser creates when a web page is loaded. The DOM allows programs and scripts to dynamically access and update an HTML document’s content, structure, and style.

The DOM defines HTML elements as objects. Also, the DOM defines the properties of all HTML elements and methods to access all HTML elements. Moreover, the DOM defines events for all HTML elements.

Below is how the DOM defines HTML elements as objects.

There are three types of DOM:

• Core DOM
• Virtual DOM
• Shadow DOM

How to create React Virtual DOM in JavaScript?

In this section of this blog on using React Virtual DOM, we dive into how to create a React Virtual DOM and how to use a React Virtual DOM to improve the performance of a web application. To follow through with this section, you need a Text Editor and a Package Manager installed on your computer. In this case, I will use Visual Studio code as a Text Editor and NPM (Node Package Manager) as a Package Manager.

Step 1: Create a project folder called VirtualDOM.

mkdir VirtualDOM

Step 2: Open the project folder in a text editor and create a folder called src.

Step 3: Create three files named index.html, style.css, and main.js in the src folder.

Step 4: Link the style.css and main.js files to the index.html file. Then create a root div with #app id.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    <script type="module" src="main.js"></script>
</body>
</html>

Step 5: Install a build tool called Parcel by running the command below on a command line.

npm install parcel

Step 6: Add the following code block to the package.json file.

"scripts": {
    "dev": "parcel src/index.html"
  },

Your package.json file should now look as shown below.

{
  "scripts": {
    "dev": "parcel src/index.html"
  },
  "dependencies": {
    "parcel": "^2.8.3"
  }
}

In the package.json file above, the scripts block defines a dev script that runs Parcel bundler with src.index.html file as the entry point. The Parcel is a web application bundler that bundles files and serves them on a server.

Step 7: Create a folder called vDom in the src folder.

Step 8: Create a file called createElement.js in the vDom folder.

Step 9: A function called createElement is used in Virtual DOM libraries such as React. The function creates a new React Virtual DOM element that can be rendered to the web application UI or Core DOM.

For that reason, add the following code to the createElement.js file.

const createElement = (tagName, {attrs = {}, children = []} = {}) => {
    return{
        tagName,
        attrs,
        children,
    }
}

export default createElement; 

In the code above, the createElement function that creates and returns a React Virtual DOM element object is defined.

The createElement function takes two arguments. The first argument is called tagName, while the second argument is an object containing two optional properties: attrs and children.

The tagName argument is a string representing the tag name of the React Virtual DOM element to be created, such as a div. The attrs property is an object that represents attributes to be applied to the React Virtual DOM element, such as class or id. The children property is an array of child Virtual DOM elements such as other React Virtual DOM elements.

Then the createElement function returns an object that contains tagName, attrs, and children properties.

Finally, the createElement function is exported so that it can be used by other files in the application.

Step 10: Add the following code to the main.js file to define the React virtual DOM.

import createElement from "./vDom/createElement";

const virtualApp = createElement('div', {
    attrs: {
      id: 'app',
    },
    children: [
      createElement('h1', {
        attrs: {
          class: 'title',
        },
        children: [
            String("Virtual DOM")
        ]
      }),
      createElement('img', {
        attrs: {
            src: "https://files.virgool.io/upload/users/16337/posts/ksazdszokx1s/hl1p9zzfuygi.png"
        }
      }),
    ],
});

In the code above, a React Virtual DOM tree is created using the createElement function imported from the createElement.js file.

The React Virtual DOM tree represents an HTML structure with a div element as the root node, with an id attribute set to the app.

The div has two child elements: an h1 element and an img element. The h1 element has a class attribute set to title and contains the string Virtual DOM as its child node. The img element has an src attribute set to a URL that points to an image file.

Step 11: Let us render the React Virtual DOM created to the Actual DOM. To do that, create a file called render.js in the vDom folder and add the following code to the file.

const renderElement = ({tagName, attrs, children}) => {
    const element = document.createElement(tagName);

    // set attributes
    for (const [k, v] of Object.entries(attrs)) {
        element.setAttribute(k, v);
    }

    // set children
    for (const child of children) {
        const $child = render(child);
        element.appendChild($child);
    }

    return element;
};

const render = (vNode) => {
    if (typeof vNode === 'string') {
        return document.createTextNode(vNode);
    }

    return renderElement(vNode);
}

export default render;

In the code above, a React Virtual DOM tree is rendered as real DOM elements.

The renderElement function takes an object representing a React Virtual DOM node as an argument, including the node’s tagName, attrs, and children properties.

Inside the renderElement function, a new DOM element with the specified tagName is created.

A for-loop is used to iterate over the attrs object to set each attribute on the newly created element using the setAttribute method.

A for-loop is used to iterate over the children array of React Virtual DOM nodes, recursively rendering each child node by calling the render function and appending it to the element using the appendChild method.

Finally, the renderElement function returns the newly created DOM element.

The render function takes a React Virtual DOM node as an argument and checks if it’s a string node or a regular React Virtual DOM node. If the node is a string, the render function returns a text node with the string as its content.

If the node is a regular React Virtual DOM node, render calls the renderElement function to create and return the corresponding DOM element.

Step 12: So far, we have created a React Virtual DOM and rendered it to the Actual DOM. Now we need to display the Actual DOM on a web page. To do that, create a file called mount.js in the vDom folder and add the following code.

const mount = (node, target) => {
    target.replaceWith(node);
    return node;
};

export default mount;

In the code above, a React Virtual DOM node is mounted onto an Actual DOM node.

The mount function takes two arguments: node, which is the React Virtual DOM node to be mounted, and target, which is the Actual DOM node onto which the React Virtual DOM node should be mounted.

The function replaces the target node with the React Virtual DOM node using the replaceWith method. This effectively removes the original target node from the document and replaces it with the new React Virtual DOM node.

Finally, the function returns the React Virtual DOM node.

Step 13: In the main.js file, import render and mount functions. At the bottom of the main.js file, render and mount the React Virtual DOM.

import createElement from "./vDom/createElement";
import render from "./vDom/render";
import mount from "./vDom/mount";

const virtualApp = createElement('div', {
    attrs: {
      id: 'app',
    },
    children: [
      createElement('h1', {
        attrs: {
          class: 'title',
        },
        children: [
            String("Virtual DOM")
        ]
      }),
      createElement('img', {
        attrs: {
            src: "https://bit.ly/41CwZhy"
        }
      }),
    ],
});

const App = render(virtualApp);
mount(App, document.getElementById('app'));

Step 14: Run the command below on the command line.

npm run dev

Navigate to http://localhost:1234, and you should see the React Virtual DOM showing on the web page.

How does a Core DOM without a Virtual DOM affect a Web Application Performance?

Assume you are shopping in an online eCommerce store web application, and the items you had added to the cart are lost every three seconds. Other online shoppers get the same user experience and as a result, the online eCommerce store sales go down.

The owner of the online eCommerce store consults a web developer who determines that the online store web application HTML elements are reloading every three seconds because of a timer that shows how long some items on the e-commerce store are on offer.

When a web application’s data changes constantly and triggers an update, the user interface is re-rendered. Re-rendering the whole application every time a change happens can make it slow, perform poorly or give a bad user experience, especially if it is a complex web application such as an online eCommerce store.

In this section of the blog on using React Virtual DOM, you will learn how the real DOM affects a web application’s performance by following the steps below.

Step 1: Create a folder called WebApp, then add two files called index.html and main.js. After that, install the Parcel build tool, as shown in the section earlier.

Step 2: In the index.html file, add the following code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web App</title>
</head>
<body>
    <div id="root">

    </div>
    <script type="module" src="/main.js"></script>
</body>
</html>

In the code above, an empty div with a root id is created. Then the main.js file is imported using a script tag.

Step 3: In the main.js file, add the following code.

const update = () => {
    const element = `
      <h3>Real DOM Vs Virtual DOM</h3>
      <span>Time: ${new Date().toLocaleTimeString()}</span>
    `;
 
    document.getElementById("root").innerHTML = element;
};

setInterval(update, 3000);

In the code above, a function called update is created. Inside the function, a variable called the element is declared where it has the value of an h3 heading and a span that displays the current time using the JavaScript Date object.

Then the innerHTML property of the empty div in the index.html file is set to the value of the element variable.

Finally, the setInterval method sets up a timer that calls the update function every 3 seconds. As a result, the content of the root id div is updated with the current time every 3 seconds.

Step 4: Run the command below on the command line.

Step 5: Navigate to http://localhost:1234, and you should see the current time updating every 3 seconds, as shown below.

Step 6: When you inspect the HTML elements, you will realize that the root id div element and its child elements representing real DOM are updated or re-rendered from scratch every 3 seconds, as shown below.

Step 7: To see how updating or re-rendering all the HTML elements every time a change affects a web application’s performance, add a form input in the main.js file, as shown below.

const update = () => {
    const element = `
      <h3>Real DOM Vs Virtual DOM</h3>
      <form>
        <input type="text"/>
      </form>
      <span>Time: ${new Date().toLocaleTimeString()}</span>
    `;
 
    document.getElementById("root").innerHTML = element;
};

setInterval(update, 3000);

Step 8: As shown below, when you try to type something on the input field, you will realize that the value is lost every time the elements are updated or re-rendered every 3 seconds.

How to use Virtual DOM to improve web application performance?

In this section of the React Virtual DOM blog, let us add a React Virtual DOM to the web application created in the section above to reduce unnecessary updates that affect its performance. The React Virtual DOM will only update or re-render the span element with the timer every three seconds instead of the whole web application element.

Step 1: In the WebApp folder created in the section above, run the command below on the command line to install ReactJS.

npm install react

Then run the command below to install ReactJS Virtual DOM.

npm install react react-dom

Step 2: Replace the code on the main.js file with the code below.

import { createRoot } from "react-dom/client";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

const update = () => {
  const element = (
    <>
      <h3>Real DOM Vs Virtual DOM</h3>
      <form>
        <input type="text" />
      </form>
      <span>Time: {new Date().toLocaleTimeString()}</span>
    </>
  );
 
  root.render(element);
};

setInterval(update, 3000);

• In the code above, the React library renders a Real DOM and a React Virtual DOM. The import { createRoot } from “react-dom/client” statement imports the createRoot function from the react-dom/client module. This function creates a root-level component in a React application containing all the other components.
• The const rootElement = document.getElementById(“root”) statement assigns the DOM element with the ID of “root” to the rootElement variable. This is where the root-level component created by createRoot will be rendered.
• The const root = createRoot(rootElement) statement creates the root-level component using the createRoot function and assigns it to the root variable.
• The const update = () => { … } statement defines a function called update that will be called every 3 seconds using the setInterval function. This function creates a new element using JSX syntax(<>), a syntax extension of JavaScript that allows you to write HTML-like code in your JavaScript files.
• The root.render(element) statement renders the new element created in the update function to the root-level component created earlier.

Step 3: Run the command below on the command line which enables Parcel to bundle the web application and start a development server that listens on port number 1234 by default.

npm run dev

Navigate to http://localhost:1234, and inspect the HTML elements.

As you can see, only the span element with the timer updates or re-renders every three seconds instead of all the web application HTML elements.

Step 4: As shown below, when you type something on the input field, the value is not lost every time the timer is updated or re-rendered.

How to use React Virtual DOM to improve web application performance?

In React, the Virtual DOM is kept in memory as a virtual user interface representation. The React Virtual DOM is then synced with the DOM by a library such as ReactDOM in a process called reconciliation.

ReactDOM is a JavaScript library used with React to build a web application user interface that can render React components in the core DOM. When you create a web application user interface components using React, ReactDOM provides the methods needed to render these components to the browser.

These methods provided by ReactDOM include:

• ReactDOM.render()
• ReactDOM.unmountComponentAtNode()
• ReactDOM.findDOMNode()
• ReactDOM.createPortal()
• ReactDOM.hydrate()

The ReactDOM.render() method takes a React component and mounts it into a DOM while ReactDOM.unmountComponentAtNode() method unmounts a React component from the DOM.

The ReactDOM.findDOMNode() method returns the underlying DOM node of a React component while ReactDOM.createPortal() method allows a React component to be rendered outside its parent DOM hierarchy.

The ReactDOM.hydrate() method is used to attach a React component to existing HTML content rendered by the server, known as Server Side Rendering (SSR) of React components.

When a web application is rendered for the first time, React uses the render() function to create a tree of React elements that act as a Virtual DOM. If the state of the web application changes, the render() function creates a new tree of React elements or Virtual DOM.

Then React compares the new Virtual DOM with the old version of the React Virtual DOM to determine which nodes have changed or have been updated. React then efficiently updates the user interface or the real DOM to match the new version of the React Virtual DOM.

To compare the new version of Virtual DOM with the old version of React Virtual DOM, React uses an algorithm called Diffing. When using the Diffing Algorithm, React first compares the type of the old and new versions of React Virtual DOM root HTML elements.

If the root elements are of different types, React will destroy the old version of the React Virtual DOM and build a new Virtual DOM from scratch. For example, if the old version of the React Virtual DOM root HTML element is a < div > and the new version of the Virtual DOM root HTML element is a < main > or < span >, the old version of the React Virtual DOM is destroyed.

If the root HTML elements of the old and new versions of the Virtual DOM are of the same type, React looks at their attributes, then keeps the old version of the React Virtual DOM and only updates the parts that have changed.

After handling the root HTML elements of the old and new versions of the Virtual DOM, React then recurses through their children’s HTML elements. When recursing through the children of the root HTML elements, React iterates both children’s HTML elements simultaneously and only updates HTML elements that have changed.

Conclusion

In conclusion, building web applications using a React Virtual DOM can improve web application performance and user experience. By using automation testing frameworks like Jasmine and web automated testing platforms like TestMu AI Cloud Selenium Grid, you can ensure a web application performs as expected when accessed by users. Learn to implement react testing with this react end to end testing guide.