What is Virtual DOM for?

The virtual DOM is used to optimize updates to the user interface (UI) of a web application. It works by creating a lightweight in-memory representation of the UI, called the virtual DOM, and using this virtual representation to compute the minimum number of changes that need to be made to the real DOM in order to reflect updates to the UI.

Here's how it works:

• When a user interacts with the web application and causes the UI to change, the virtual DOM creates a new virtual tree to represent the updated UI.

• It then compares this new virtual tree to the previous virtual tree, and computes the minimum number of changes that need to be made to the real DOM to reflect the updates.

• These changes are then made to the real DOM in a single batch, which is much more efficient than making individual changes to the DOM for each update.

Using the virtual DOM can significantly improve the performance of a web application, especially for applications with complex UI layouts or large amounts of data that need to be displayed. It allows developers to update the UI efficiently, without having to worry about the performance impact of manipulating the real DOM directly.

Here is an example of how the virtual DOM can be used to optimize updates to a simple UI element, a div element with the text "Hello, World!":

let root = document.getElementById("root");

function render() {
  root.innerHTML = "Hello, World!";
}

render();

Every time the render function is called, the inner HTML of the root element is completely replaced with the new text. This can be inefficient if the render function is called frequently, as the browser will need to re-create the entire DOM tree for the root element every time.

To optimize this with the virtual DOM, we can create a virtual tree representation of the root element, and use this virtual tree to compute the minimum number of changes needed to update the real DOM:

let root = document.getElementById("root");

let virtualRoot = {
  tagName: "div",
  children: [
    {
      tagName: "text",
      text: "Hello, World!",
    },
  ],
};

function render() {
  let newVirtualRoot = {
    tagName: "div",
    children: [
      {
        tagName: "text",
        text: "Hello, World!",
      },
    ],
  };

  let patches = diff(virtualRoot, newVirtualRoot);
  virtualRoot = newVirtualRoot;
  patch(root, patches);
}

render();

In this example, the diff function compares the old virtual tree (virtualRoot) to the new virtual tree (newVirtualRoot), and returns a list of patches representing the minimum number of changes needed to update the real DOM. The patch function then applies these patches to the real DOM, updating it to reflect the new virtual tree.

This approach allows the render function to update the UI efficiently, without having to re-create the entire DOM tree every time. It also makes it easier for the developer to update the UI, as they can work with the virtual tree rather than directly manipulating the real DOM.