React: The Virtual DOM
React Overview
What does Facebook, Amazon, Tesla and Netflix all have in common? You guessed it! They all use React. React is a popular frontend framework, which is built entirely out of JavaScript, using a combination of dependencies. Although React is a JavaScript library for building fast and interactive user interfaces, we use JSX (an extension of vanilla JavaScript with a specific syntax) to separate our data out into components to form a fully working web application. Since components allows us to separate code and functionality in a logical way, it makes it easy to produce highly reusable code, providing a large advantage in your development efforts!
So, the next time you visit one of these applications, consider the multiple components you see or interact with, like the header, search bar, main content and footer. Whenever you post or search for something, it simply renders new information without the page refreshing, delivering instant gratification! How does that all happen so quickly? Well, if we take a look under the hood, we can see that React has many of cool features, one of them being the Virtual DOM (Virtual Document Object Model).
Virtual DOM
The DOM has components with state and props, which holds the data of the application used to pass down from parent to child in the hierarchy. Rather than rendering from the DOM directly, React makes the DOM node-tree-like structure of all the components internally called the Virtual DOM, (which is essentially a copy of the real DOM) any time there is a change that is kept in the browser memory in the form of a JavaScript Object.
Why create a Virtual DOM when we already have a real one?
We could just use the real DOM, however that process would be a slow one at best. Any updates would have to be carefully considered since altering a grandparent/parent in the hierarchy would have a ripple affect on its children. Even when changes are made, the DOM will have to go through a process of comparing and parsing the CSS for layout changes and HTML for user interface calculations before repainting the updated webpage before rendering. If that sounds tedious or slow, it’s because it would be.
Rather than combing through the entire DOM every time there is a change, React solves this problem quickly with the Virtual DOM. This approach utilizes the Reconciliation process, which uses an efficient diffing algorithm to determine the changes made to the virtual DOM before comparing it to the real DOM to identify where to update. After this process, it’s the changes on the real DOM that causes the screen to change.
Wouldn’t double rendering slow things down?
Although it can seem that rendering twice (to the Virtual DOM, then the real DOM) would be slow or wasteful, but the fact is that this process of rendering to the virtual DOM first is more efficient than rendering to the actual browser DOM. As developers, we just need to write code to customize how we want our UI to look, and Virtual DOM will work out the difference between the what it looks like now and only changes what needs to be updated because React only re-renders due to a change in state or props. This helps avoid any unnecessary changes to the DOM. It is also important to note that it collects several changes to be applied all at once to ensure minimum rendering time to the real DOM, providing a higher performance and a more user friendly experience overall!
Now that we’ve popped the hood on ReactJS and took a peek at the virtual DOM feature, we can appreciate how it allows us to get that immediate gratification of content rendering to to our screens in any of the highly interactive applications we use. That’s just only one feature! There are many other really cool features worth looking into and I have provided some links below to help you get started on your React journey!
Happy Coding :)
What is React & Why is it so popular?(Video)
