Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.1 Virtual DOM

The Virtual DOM is one of the core ideas behind React. In this lesson we'll cover the basics of how the Virtual DOM operates, with a high-level look at its algorithm.

2.1 Virtual DOM

In this lesson let's spend a little time and understand Reacts Virtual DOM. Now to understand the Virtual DOM we do have to compare it with the HTML DOM. The HTML DOM is inherently very slow but a Virtual DOM is extremely fast. So the obvious question over here is, why is it slow? So HTML DOM is not just about the DOM itself. It needs to be visually represented on the screen. And this requires doing layout calculations, painting, and then compositing onto the screen. All of this is of course not trivial and that takes up the extra cost. A virtual DOM as the name suggests is entirely in memory. And has no rendering cost at all, it's purely done through java script objects and that makes it extremely fast. Now without sounding like I'm stating the obvious, HTML DOM is very easy to create using a texture representation. Of course which is HTML, a counterpart for virtual DOM is JSX. A powerful dialect of JavaScript that mixes in XML to create the UI representation entirely in text. Now personally I feel that XML is the best textual representation of the user interface. The tag structure of XML very nicely captures the runtime tree structure of the interface. Of course, JSX is not the first place where you see the use of XML to represent UIs. In the past, we had XAML from Microsoft representing WPF interfaces and Silverlight interfaces. HTML code was used to represent the web interfaces. And in case of Firefox, the XUL, or zool, will be used to represent the Firefox UI. So, XML is very prevalent in proviso when it comes to representing UIs in text. With that liberal [INAUDIBLE], let's get back to our Visual DOM. Now for the Virtual DOM to be really useful it has to be rendered to the HTML DOM at some point. And this is where React really shines. It takes a very highly optimized approach to take the Virtual DOM and translate it to the real HTML DOM. Let's see how it does that. Now imagine that a lot of the render passes, this was a virtual DOM. And then in the next render pass, this was a new Virtual DOM. Obviously a few things have changed over here. In particular, a node has been deleted, which is shown in a faded red, and new nodes have been added, which are shown in green. The React detects this difference by comparing the current Virtual DOM with the previous render of the Virtual DOM. And this phase is called as Diff, short for differencing. Once react knows where the changes are, the next step is to actually patch the HTML DOM with these changes. Patching the HTML DOM is a highly optimized step and ensures that only the minimal sort of changes need to be made to create the new version of the HTML DOM. So if I had to summarize React's render algorithm in simple steps, I would it's the combination of Diff and Patch. Which results in the minimal sort of changes to make to HTML DOM. Now one thing to mention over here is that although I only show nodes, the same technique extends to attributes as well. So react looks at both nodes and attributes to detect the minimum sort of changes. But the self is based on some heuristic comparisons between the previous Virtual DOM and the next Virtual DOM. Now doing three comparisons is algorithmically very complex. So the Reacts team takes a heuristic approach to short circuit some of these steps. When it comes to the batching step, react and choose the updates that are batched as much as possible and also the modifications are localized just to the subtree where the change was detected. All of these micro-optimizations contribute to the fast rendering in React. JSX is a really convenient way to describe our yak components and the overall UI for the application. This, of course, transpiles down into plain Java script for tools like Babel. Now it turns out that this intermediate representation of JSX we can kind of abstract the description of the UI from the actual rendering technology. The HTML DOM is the default renderer for React, but that's not the only one. We also have native widgets which we can create using React native on iOS. And similarly we have renderers for Canvas and WebGL as well. So the whole JSX and the Virtual DOM concept is pretty universal and can be applied to almost any rendering technology. All right, so that brings us to the end of this lesson. We have seen how the Virtual DOM can be really fast compared to HTML DOM. Using a two fifth algorithm of Diff and Patch, we can see how the Virtual DOM can be translated into HTML DOM. And finally, with JSX, we've seen how it decouples the description of the URL from the rendering technology, making it a more universal concept for describing and building UIs. In the next lesson, we'll look at and related tools that are used to build React applications.

Back to the top