What is a virtual DOM in React?

The virtual DOM(Document Object Model ) is a fundamental React concept. You have probably perceive of it if you have written React code in the last few years. However, you may not understand how it works and why React uses it.

This article will cover what a virtual DOMDocument Object Model ) is, and its uses in React, and practical example code to help explain this concept.

What is the DOM?

To understand the virtual DOM(Document Object Model)  and it’s learn why React implements it, let us refresh our knowledge of the actual browser (Document Object Model)  DOM.

Normally, whenever a our web page is requested by a user, the browser receives an HTML(Hypertext Markup Language) document for that page from the server. The browser then constructs a logical level tree-like structure from the HTML(Hypertext Markup Language) for the user to see the requested page in the client.

This tree-like structure is called the Document Object Model(DOM), also known as the DOM. It is a structural representation of the web document — in this case, an HTML(Hypertext Markup Language)  document — as React nodes and objects.

The DOM(Document Object Model) serves as an interface for the web pages document so that JavaScript(JS) and other scripting languages can access and programmatically interact with and manipulate the document’s content.

For instance, web developers can use the DOM(Document Object Model) APIs to add or removing  elements, modify their appearance, and perform user actions on the web elements.

How re-rendering impacts performance

DOM(Document Object Model) operations are lighter operations and very fast. However, and when the web app data changes and triggers an update, re-rendering can be expensive.

Let’s simulate a re-rendering web page with the JavaScript(JS) code below:

const update = () => {
 const element = `
  <h3>JavaScript:</h3>
  <form>
   <input type="text"/>
  </form>
  <span>Time: ${new Date().toLocaleTimeString()}</span>
 `;
 document.getElementById("root1").innerHTML = element;
};
setInterval(update, 1000);

DOM tree:

The setInterval() callback function in the code lets us trigger a simulated re-render of the UI after each and every second. As we can see in the GIF below, the document DOM(Document Object Model) elements are rebuilt and repainted on each and evry update. The text input form in the UI also loses its state due to this re-rendering:

As we can see above, the text input field loses the input form value when an update occurs in the UI. This calls for optimization.

Different JavaScript(JS) frameworks have various solutions and strategies to optimize re-rendering. The React, however, implements the concept of virtual (Document Object Model) DOM.

Exploring the virtual DOM in React

As the name implies, virtual DOM(Document Object Model) is a “virtual” representation of the actual DOM(Document Object Model). By virtual, we mean a much lighter replica of the actual DOM(Document Object Model) — in the input form of react objects — that can be saved in the browser memory.

A common misconception is that the virtual DOM(Document Object Model) is faster than or rivals the react actual DOM(Document Object Model). That is not correct! In fact, the virtual DOM’s(Document Object Model) operations support or add to those of the actual DOM(Document Object Model). It provides a mechanism that lets the actual DOM(Document Object Model) computes minimal DOM(Document Object Model) operation when re-rendering the UI.

React deploys the concept of virtual DOM( Document Object Model ) in the rendering process because it conforms with its declarative most approach.

This approach lets us specify what state we want the UI to be in, after which React most it happen. It abstracts manual DOM( Document Object Model ) changing away from the web developer, helping us write more predictable, unruffled code, so we can focus on creating react components.

The virtual DOM( Document Object Model ) allows web developers to not worry about react state transitions. Once we update the react state, React ensures the DOM( Document Object Model ) matches that state.

For instance, in our last example, on every re-render component, React will ensure only the time gets updated in the actual DOM( Document Object Model ). This way, we won’t waste the value of the input field form while the UI update happens.

The virtual DOM object

Let’s take a look at the following render code component representing the React version of the previous JavaScript(JS) example:

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

JSX code in plain React

const element = React.createElement(
 React.Fragment,
 null,
 React.createElement("h3", null, "React:"),
 React.createElement(
  "form",
  null,
  React.createElement("input", {
   type: "text"
  })
 ),
 React.createElement("span", null, "Time: ", new Date().toLocaleTimeString())
);

if we log the React element

const element = (
  <>
   <h3>React:</h3>
   <form>
    <input type="text" />
   </form>
   <span>Time: {new Date().toLocaleTimeString()}</span>
  </> );
 console.log(element)