Virtual DOM and Bandwidth Salvation in React JS: React makes us think thoroughly about what each element will represent, because each component is tied to some sort of software function that will, in real-time, update the data in each component without updating the entire layout. In React this process is made more efficient in comparison to traditional applications. You don’t have to reload the entire page like on regular HTML websites. This makes your application feel different, and it saves bandwidth.
React JS Virtual DOM & Bandwidth Salvation
If you think about it, the non-reactive websites we’ve been building until 2017 is really just a lazy man’s design idea. Reloading everything just to see if there is a new alert isn’t exactly the best application design. Yet, this is how websites like Facebook have been working all of this time. And bit by bit, it’s starting to change. This is why they are moving toward reactive implementations.
But Reactive programming isn’t just a bunch of ajax calls that pull the data and replace an HTML element. It’s much more sophisticated. And because fast access to only relevant components is usually the key to good application design this is where Virtual DOM comes in.
Virtual DOM is really a quirky way to provide a fast way of modifying the DOM while doing slower old-fashioned alternatives. The Virtual DOM is hands down one of the greatest advantages of choosing to write your application with the React library.
In fact, when you add a react library to your web project, it allows you to add a react.dom library. The two are just inseparable. And all reactive JavaScript applications by default also include React DOM library. This is where React’s Virtual DOM makes a big difference in the usability of your application. It’s what allows websites to have that native application feel, where each element responds instantly to a touch event. You’ve probably already seen this starting to happen throughout the internet on sites like Netflix, Facebook, and Instagram.
You can actually feel the difference. Where actions happen instantly, seemingly without having to wait for HTTP requests to load first every time you press a button. The application responds instantly. React doesn’t eliminate HTTP bandwidth, it just minimizes it and focuses only on whether the data really should be transferred or not just because of a button click event, for example.
Of course sites like Netflix and Amazon preload some of the data (first 15 seconds of a movie trailer, for example) regardless of whether the user clicks on the play button or not. But together with other “reactive” principles, it makes a big difference in UI responsiveness.
We’re still building the app from familiar HTML elements, but the response rate to each event is brought about by a DOM that is significantly faster than even jQuery implementation. There is nothing special you have to do in order to start using virtual DOM. By utilizing the React component templating pattern, you’re automatically using react’s own virtual DOM traversal. It transparently imitates the standard DOM model by providing camel-case (like className and font family) methods and properties matching the names that we’re already familiar with.