Why you should know about the Virtual DOM

In a previous article, we discussed the DOM and mentioned that having an understanding of this is important to understand React. Well the reason for that is the virtual DOM.

What is the Virtual DOM?

Think of the virtual DOM as a concept, there is nothing called the virtual DOM within the React codebase. It serves as a useful tool to do what React was meant for, creating user interface components that deal with state (we will briefly define state below)

The virtual DOM is an in memory representation of the DOM. It has the same properties, but doesn’t have all the overhead in putting that it onto the screen like a DOM. When the DOM was first conceived the idea of frequently changing things on the page was not really a concept. However, as websites have grown in more complexity having this ability to change things frequently is a major advantage.

You will see a lot written about the virtual DOM but essentially all it is, is a plain old JavaScript object. This object can be manipulated easily and frequently with ease and is why React has used it as a construct.

The other aspect to the virtual DOM that comes with changing things frequently is the concept of state. Essentially state is a way of storing data in a component that can change and can be used to display something on the page that you want to be dynamic. You can imagine in a complex website there may be many things you want to change and keep a track record of. Well-to-do this through plain DOM manipulation becomes an unwieldy task. It is this that React does best, so when I talk about user interfaces that deal with state, this is what I mean.

React also allows us to be declarative, that is we do not care about the internals of how React does what we want. We just want to be able to tell it what state we want the component to be in and for React to eventually manipulate the DOM accordingly. Additionally, to this, every single time a state changes, then the virtual DOM gets updated. This is how we keep track of all the states.

Basic Abstraction of the Virtual DOM

Let's put some code into this. This is a very stripped down version of what the virtual DOM could be like.

Say we have a list component which corresponds to an unordered list. It may look like this

const list = {
    tagName: "ul",
    attributes: { "class": "list" },
    children: [
        {
            tagName: "li",
            attributes: { "class": "list__item" },
            textContent: "List item"
        }
    ]
};

So you now must be thinking well how is this virtual DOM Created? Any time we write any JSX, this gets converted to a React.Element function. This returns an object and it is this object that is the part of virtual DOM. Whenever you get confused about this, think back to this.

How React uses the Virtual DOM

When changes need to be made, the virtual DOM gets updated by creating a new virtual DOM with the intended changes applied.

Every single time a JSX element gets rendered using the ReactDOM.render() function a whole new virtual DOM is created. At first this may seem inefficient but the cost in doing this is insignificant, we are essentially creating a set of objects.

Below is an example of what React does at a very basic level, here we have copied the above example of a virtual DOM

const copy = {
    tagName: "ul",
    attributes: { "class": "list" },
    children: [
        {
            tagName: "li",
            attributes: { "class": "list__item" },
            textContent: "List item one"
        },
        {
            tagName: "li",
            attributes: { "class": "list__item" },
            textContent: "List item two"
        }
    ]
};

This new copy of DOM is then compared to a snapshot of the previous virtual DOM. React then produces a set of instructions tells us what needs to be changed between these two versions of the virtual DOM. This process is called diffing. React makes a decision on how efficiently to make these changes and only changes the DOM for these changes.

const diffs = [
    {
        newNode: { /* new version of list item one */ },
        oldNode: { /* original version of list item one */ },
        index: /* index of element in parent's list of child nodes */
    },
    {
        newNode: { /* list item two */ },
        index: { /* */ }
    }
]

It essentially syncs the virtual DOM with the DOM. It also means that React only changes the DOM once. This whole process is comparing and changing the virtual DOM to the eventual DOM manipulation is called reconciliation.

The beauty of this is that we as the coder do not have to care about how this occurs, React takes this burden away from us and allows us to focus on other concerns.

So now you should have a good grasp on the fundamentals of the virtual DOM and how react works from a high structure. Until next time!

About the Author

I’m a practising medical physician and educationalist as well as a web developer. Please see here for further details about what I’m up to project-wise on my blog and other posts. If you want to get in contact with me, please do so here
aaron.smith.07@aberdeen.ac.uk or on Twitter @aaronsmithdev.