React & The Virtual DOM

First off, the Domain-Object-Model (DOM) is a representation parsed by the browser that is comprised of a document’s structure and content. It is a programming interface for HTML or XML documents that allows programs to change the document style, content, and structure. The DOM acts as a live data structure and when modified it reflects that change on screen.

Visual Representation of Basic DOM Structure

A web-page is a document that can be displayed as the HTML source or in a browser window- although they appear different- they are the same document. The DOM represents this document in browser as objects and nodes and allows for real-time manipulation by allowing programming languages to access these objects and nodes. Without the DOM, JavaScript would have no notation of web pages and their elements and thus no way to access and manipulate a web-page.

Manipulation of the DOM is central to the modern, interactive web. However, it is slow. With most JavaScript frameworks the DOM is updated much more often than necessary. Now, let’s talk virtual DOM. The virtual DOM was popularized by the people who created React (a JavaScript library), and is one of the central concepts making React so great.

React is a JavaScript library that was created by the people at Facebook in 2011

Without getting too deep into it, React is a frontend JavaScript library used for building web and mobile UI’s. It allows developers to build reusable UI components- which are JavaScript functions or classes that may accept input (aka properties or props) and return React elements that describe how part of the UI will appear. A React component is re-rendered when it’s internal state changes due to user-interaction (ex. the user types into an input field) in the browser or if it receives props (ex. a parent component has a state update that has been passed down as a prop to a child component).

In React, there is a corresponding virtual DOM object for every DOM object. The virtual DOM objects have all the same properties as objects in the real DOM, however it is unable to change what is on screen making it much more lightweight. It’s like the schematics for the DOM rather than the physical building. The virtual DOM is a representation of the real DOM. The virtual DOM is created when new elements are added to the user interface (UI).

The purpose of this virtual DOM is that when a change to an element in-browser trigger’s a re-render of a component, the entire virtual DOM is updated- which is much faster than doing so in the real DOM as nothing is actually represented on-screen at this point. The differences (or diffs) between the updated virtual DOM and the pre-update virtual DOM are compared- and only the virtual DOM objects with diffs are updated in the real DOM and represented in-browser. This means that the entire web-page does not need to be re-rendered every time a change occurs- making the process much faster.

Let’s say React didn’t incorporate the functionality of the virtual DOM- any time an event is triggered or state or props of any component are changed, the entire DOM is updated. This means all of the data is fetched again (slow) and then entire web-page is re-rendered (slow) with every change. Thanks to the virtual DOM web and native app users don’t have to wait for the entire DOM tree to update every time a change occurs in-browser.

Way to Go React!

Full-stack software engineer experienced in Ruby on Rails, React, Redux, and JavaScript based programming.