The DOM and React’s Virtual DOM

David Joseph Katz
A free video tutorial from David Joseph Katz
Software Engineer
4.4 instructor rating • 19 courses • 223,797 students

Lecture description

Go over the JavaScript raw DOM API for the browser. Understand how React creates its own virtual DOM as an internal representation of the raw DOM. Learn how the virtual DOM aids React applications to update their UI in a very efficient way.

Learn more from the full course

React JS Web Development - The Essentials Bootcamp

Bootcamp on the React.js essentials. Gain a strong foundation of the core concepts, and build exciting and useful apps!

10:33:13 of on-demand video • Updated August 2019

  • Learn React the right and learn best practices.
  • Dive into the React engine, and learn how it works under the hood.
  • See how React fits in the big picture of web development.
  • Learn how to build applications from scratch.
  • Cover the crucial concepts of bundling and transpiling, and create frontend application build systems.
English Hey let's explore the DOM and React's virtual DOM. The actual name for the DOM is the Document Object Model. The Document Object Model is an API that allows us to manipulate html documents it takes an html like structure and represents that same structure in a tree like structure, that is a hierarchy of objects. Each node in the tree is an individual object. The power of the Document Object Model is that it represents all the parts of the documents within those individual objects. There's objects that have children which are other objects in the tree. In each of those objects has a unique identity with their own inner methods. The Document Object Model allows us to insert update or remove these objects and therefore update the underlying document. Now this document is at the heart of web development as the browsers provide the Document Object Model to make the web page accessible to JavaScript. In JavaScript we can directly work with the Document Object Model using the document keyword which is made accessible anywhere in the script. In terms of Web Apps the document is crucial because it's how we can make the web page dynamic by using the Document Object Model to add update and remove elements from the web page itself. All right let's explore this document object more closely. Back in the command line make sure in the react-bootcamp starter directory. Once you're there fire npm run start to start the parcel server which will build the project at local host:1234 So give that a visit at localhost:1234 and you should see this right element with JSX text right away. Cool but the part we're concerned about is exploring the document object so in the console. Go ahead and enter document and what you're going to find is that this document object is a collapsible version an expandable version of the underlying web page it's the html in the body portion. You're going to find that there's the div with the id of root with the react element JSX. Cool now the one function we're very familiar with is the document.getElementByID function and we can get the one with the id of root and this returns the dead with the id of root which has our inserted element cool when we run ReactDOM.render retargeting to insert some elements or components at this document .getElementById of root so let's check out how this code for the insertion actually works. First up we create an element using document.createElement as a function. And then we passing the name of the element that we want to create which in this case it'll be a div the element itself is now going to be a pair of div tags. Cool then we can set the entire text of this element. So how about document object node is gonna be the text of this element and then we can append that as a child to the root div. So we'll say document.getElementByid of root. This will give us that div with the id of root that we have above. And this has its own append child function and we can append the element as a child to this and you'll find that the result of that is that we get an update within the actual web page in our document object node gets inserted their core later on. If we decide to remove this div we can use the remove child function so press up now we access the previous command and then instead of append use remove child and now it disappears from the web page. Nice. Now these methods that we just use are only a tiny percentage of the huge number of methods that the document provides to interact with the web page. If you type in document . you're gonna find that there's all these other methods that you can use to interact with the underlying web application. But the thing is beyond document.getElementById of root. We won't be calling these methods directly in our React code. Instead react we'll take care of calling these document methods in an optimized way react approaches this through a system called the Virtual DOM. Essentially there's the regular dom that the browser provides and then there's a virtual copy of this DOM maintained internally in the react engine called the virtual DOM. So for every DOM object react creates a corresponding virtual DOM object. But the thing is that the virtual DOM objects are much much more lightweight DOM object relation with the regular DOM object is actually pretty slow when it comes to JavaScript operations and it's only natural as these objects are really deep and complicated in order to represent the massive number of ways that someone could interact with a web page. So say we wanted to update a bunch of elements on the page. Perhaps you want to reorganize one of the list items. This is achievable using only methods from the pure Document objects but when it comes to huge lists like this and a lot of shuffling around of elements using the heavyweight Dom objects can be pretty slow. Doing the same task with the much lighter weight Virtual DOM objects would be much quicker. React's virtual DOM is quicker because it doesn't use those heavyweight document objects from the native document API. Instead it only uses its own lightweight objects. And while the virtual DOM is updating the actual DOM can be left unchanged But once the virtual DOM is done react then takes a snapshot of the virtual DOM. It then compares the updated virtual DOM to the State of the actual DOM. It finds the differences and then calculates the minimal number of actual DOM methods to call in order to update the Web page in the most efficient and optimal way possible and the result is that the DOM is then updated to match the virtual DOM held within reacts engine. So this is one of the greatest innovations of react. By calculating how the DOM should be updated in a completely internal virtual representation within the engine itself. Actual updates and calls the DOM are minimalist. That's how react applications are fast and very performant. Okay with this new understanding of how react works internally to interact with the DOM we've covered what I think is necessary for foundational topics for react in web development. All right to briefly review we discuss how HTML, CSS, and JavaScript are core pillars of web development. Then we went over how web apps are served documents to the browser that the browser then displays and parses We covered how react projects are bundled and transformed into a single script that the browser can support. And now we've covered how react works internally but optimizing calls to the core document object through the virtual DOM, in order to create a highly performant web applications. With these concepts covered we can now start exploring the react framework itself a little more deeply with topics like lifecycle methods and more. We'll also build an entirely new complete react applicatio, a project that once it's done can be included in your portfolio or added to your resume. All right. See you there!