Understanding how virtual DOM works in React

DOM

To understand virtual DOM, we must know how DOM works.

When you enter a URL in the browser, the browser requests the specified server send back files, including HTML, CSS, and JS files. Just like where you need to compile a C file with a compiler before running, the browser first renders HTML into a DOM (Document Object Modal) tree using the HTML parser.

DOM is a tree structure where each node is an HTML element, HTML attribute, plain text, comments, etc. You can check out how HTML gets translated into DOM using this tool.

The browser then binds CSS styles and JS events with specified nodes in the DOM tree, paints the render tree, and finally displays the real web page you see on the screen.

For example, JS can access nodes in the document with functions like document.getElementById()

Virtual DOM

When for example, the text value in a <p> tag changes, the browser re-renders the HTML into a new DOM containing all original nodes with the updated value. This is time-consuming. React, on the other hand, first converts HTML into a JS object as a virtual DOM.

For example,

<div id="app">
  <p class="text">hello world!!!</p>
</div>

would be

{
  tag: 'div',
  props: {
    id: 'app'
  },
  chidren: [
    {
      tag: 'p',
      props: {
        className: 'text'
      },
      chidren: [
        'hello world!!!'
      ]
    }
  ]
}

Since the browser only understands the traditional DOM, React must render the virtual DOM into DOM first. We can write a simple version of render() in the React library.

function setProps (element, props) {
  Object.entries(props).forEach(([key, value]) => {
    element.setAttribute(
      key === 'className' ? 'class' : key,
      value
    )
  })
}

function render(vdom) {
    if (typeof vdom === 'string' || typeof vdom === 'number') {
        return document.createTextNode(vdom);
    }
    const { tag, props, children } = vdom
    const element = document.createElement(tag);
    setProps(element, props);

    children.map(render).forEach(element.appendChild.bind(element));

    vdom.dom = element;
    return element;
}

When a property in the JS object (a component in the virtual DOM) changes, React uses a diff algorithm to compare the new virtual DOM with the old one, and only re-renders the updated nodes.

---

Although computing diff and rendering virtual DOM to DOM is slower than directly rendering HTML to DOM, the cost of re-rendering the whole DOM is usually much larger than updating the necessary nodes.

As a result, React gives better re-render performance using virtual DOM than plain HTML and JS with the traditional DOM. The virtual DOM is a perfect design for React in modern web projects where state changes and components re-renders happen a lot.