What the heck is the Virtual DOM?
If you’ve worked in React you’ve heard of the illusive Virtual DOM, but what actually is it, and how is it different from the regular DOM?
To start let’s take a step back and look at the DOM.
“The Document Object Model (DOM) is a programming interface for HTML and XML documents. It represents the page so that programs can change the document structure, style, and content. The DOM represents the document as nodes and objects. That way, programming languages can connect to the page.”
-MDN Web Docs
Essentially, we use JavaScript to work with and manipulate the node elements on a page and the DOM is what allows us to make that connection.
What are nodes? Everything. Everything is a node. From the inner most text to the document itself everything on the DOM is a node.
The biggest problem with basic JS DOM manipulation is that the DOM isn’t able to update any one item at a given moment, it has to re-render everything to change the one thing. On top of that, as more and more JS frameworks are becoming popular and faster, this manipulation has become slow and outdated. So as the commonality of single page applications and frameworks grow, there had to be a better way to manage this… Enter The Virtual DOM!
“The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM. This process is called reconciliation.
This approach enables the declarative API of React: You tell React what state you want the UI to be in, and it makes sure the DOM matches that state. This abstracts out the attribute manipulation, event handling, and manual DOM updating that you would otherwise have to use to build your app.”
Straight from the source, -ReactJS Docs
The way we create a Virtual DOM is through React Components. By importing Component from react into our application, we have access to components.
To make any HTML code a static React Component, you just need to return HTML Code in React’s render() method. This is done in the form of JSX, which is like a blend of JavaScript and HTML. Render is one of React’s lifecycle methods, which you can read more about here, but for now know that render is the point in our code when we start to build the react element tree.
Whenever the state in our application changes, the Virtual DOM starts to change/add/update it’s element tree, and the actual DOM remains the same. Then, React compares our Virtual DOM tree to the ‘snapshot’, or previous state of the virtual DOM tree. This process is called ‘diffing.’
Finally, React changes only those elements that have changed on the real DOM.
Essentially, React takes out the tedious traversing of the DOM tree and does this lower level stuff to make everything easier for developers, and run way more efficiently and smoothly.
To Recap:
- Though DOM manipulation is the heart of the interactive web, it is slower than most modern JS ops and frameworks.
- The Virtual DOM is essentially a copy of the DOM that lays on top of the DOM that updates.
- For every DOM object there is a corresponding virtual DOM object that has the same properties and just lacks the power of actually changing what’s on the screen which is why it’s much faster.
- We write to the virtual DOM by using JSX which is JS that mostly looks like straight up HTML to write reactElements — the elements that are representations of the real DOM elements.
- When we change state, the virtual DOM checks what elements have and haven’t changed on the virtual DOM before it updates the real DOM. This is called diffing.
- Essentially React takes out traversing the DOM tree and does the low level stuff for you.
