ReactJS - Virtual DOM

So . . . How About React?

If we’re going to start talking about how it functions, I think we should start by talking about what it works with. Many are already used to the HTML commonly associated with static website design. In it’s more basic, it can look something like this, though <h1>Hello World</h1> by itself in the file would yield the same output; this is trying to imitate a larger-scale structure. With this basic structure, combined with CSS-aided styling, we can have all the static content we want (and a bit can even be hidden/reformatted on hover or focus, to boot). From this point, we need JavaScript . . . sort of.

How is JS usually

So, back to JavaScript. As mentioned before, the language is one of the three core technologies of the world wide web. Used commonly on the client side, you can manipulate the content of the HTML code, the DOM, to do just about anything. For some great interactive examples, check out the W3School’s JavaScript HTML DOM Events page [6]. This is great, but in the process of this, the browser must reload the DOM every time JavaScript edits it. In the context of a small application, this, of course, is generally insignificant. However, in larger modern websites, inefficient usage of this can stack up and cause major performance issues as complexity increases. In the example, let’s just say that we used JavaScript to change the h1 element in the DOM. That means that everything in the DOM gets updated. Not much in the example, I know, but imagine is the file had hundreds of intricate elements running both inside of it and alongside it [5, 7]. Would you want to reload all of them?

What does React do?

ReactJS uses the technique of Virtual DOMs to address this. The library creates a JavaScript object to mimic the real DOM, but a lightweight version with less complexity, known as a Virtual DOM. When changes occur during runtime, React makes a snapshot of the virtual DOM just prior to alteration and then applies said change to the original virtual DOM. It then uses a diffing algorithm to spot the difference between the snapshot and normal virtual DOM and isolate the changes, finding the dirty objects. With the changes found, React’s functions change the altered objects and only the altered objects to reflect the change on the real DOM, therefore being outputted on the screen [1, 3, 5, 7, etc.].

Courtesy of Learning React Native [8]

Why is this significant?

So, why does this matter, anyways? In computer science, efficiency is an important facet of design. It allows for complex computations to take less time, power, and resources, which thereby speeds up the process and allows for more computational features to be implemented and ran alongside this. Without progress in this regard, computing machines would not be able to advance in complexity at nearly the rate that they have been, and many systems would slow down at an increasing rates as more is added to them. With efficiency, speed is improved and additional insight and data can be derived or the user experience can be enhanced.

---

Bibliography

Of note, this includes both content that I have used and that which I intend to use for future posts

• [1] FreeCodeCamp.org: All the fundamental React.js concepts, jammed into this single Medium article
• [2] InfoWorld.com: React: Making faster, smoother UIs for data-driven Web apps
• [3] JLongster.com: Removing User Interface Complexity, or Why React is Awesome
• [4] Hackernoon.com: Virtual DOM in ReactJS
• [5] React: The Virtual DOM
• [6] W3Schools: JavaScript HTML DOM Events
• [7] Tony Freed: What is Virtual DOM
• [8] Learning React Native: Chapter 2. Working with React Native