Get to Know the Mysterious Virtual DOM.

The virtual DOM is a concept that I was introduced to at the start of my journey for learning React. The most important information that stood out to me is that the virtual DOM allows us to create and save the changes in our React app without us reloading our page, unlike in Vanilla Javascript where we had to reload the browser to view the changes we made to it. This information made the virtual DOM seem somewhat magical to me, but I knew there had to be more than magic going on behind the scenes.

What is the Virtual DOM

According to reactjs.org, the virtual DOM is a programming concept where a virtual representation of the user interface is kept in memory and synced with the real DOM by a library like ReactDOM. The virtual DOM object can be understood as a representation or a lightweight copy of the DOM object. The virtual DOM has the same properties of the DOM object but does not have the power to directly change things on the screen. This makes manipulating the virtual DOM much faster than manipulating the DOM because nothing gets drawn on the screen.

Think of manipulating the virtual DOM as editing a blueprint, as opposed to moving rooms in an actual house. -Codecademy

How the Virtual DOM Works

The original DOM has two parts: the object-based representation of the HTML document and the API to manipulating that object.

The code above consists of an unordered list with one list item. If we wanted to update the first list item and possibly add a second item to the list we would need to find the element we want to update, create new elements, add attributes and then update the DOM.

The first specification of the DOM was released in 1998 and back then the way we built and managed web pages was very different, there was less reliance on using DOM APIs to update the page as frequently. Simple methods like document.createElement() are fine for small scaled apps but once apps start getting larger and we are updating multiple elements on the page every few seconds, it will get time costly to constantly query and update the DOM.

The virtual DOM solves this problem by acting like a copy of the DOM and this copy can be frequently changed without using DOM API’s. Once the updates are made to the virtual DOM, it is then compared to the original DOM and the specific contrasts are changed in an optimized fashion.

Benefits of the Virtual DOM

  1. Efficiency: The virtual DOM is a more efficient way of updating the web browser view every time the data changes in a React app. It is always faster to render the virtual DOM than rendering the user interface in the actual DOM browser.
  2. CPU-Intensive: The virtual DOM adds a layer of abstraction in the React app by having an additional layer of scripting. This extra layer of scripting is used to make the optimizations the browser carries out for DOM manipulation more transparent to the developer. This makes React much more CPU-intensive.
  3. Optimize Memory Usage: The virtual DOM does not hold observables in the memory. The virtual DOM can trigger a complete refresh to the UI. This is different from the other libraries which updates when necessary based on the state of the document.

In conclusion, the virtual DOM is a tool that helps us interact with DOM elements in an easier and performative way. It is a Javascript object representation of the DOM that we can make changes to as frequently as we want. Changes made to the object collated and then modifications are made to the DOM.

Resources

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store