With the highly competitive, extremely demanding, and rapidly changing market, it becomes inevitable to keep on updating our applications or software to keep our position intact in the market. But, adding something new can be tedious, and here’s where a concept called virtual DOM can come to your rescue. Before we delve into the details of virtual DOM, let us familiarize ourselves with the related terminologies before moving forward.
What is a DOM?
The acronym DOM stands for ‘Document Object Model.’ It is the user interface of particular software or application. Every time there is an update in the UI, the DOM reflects the change. However, every minute update in the UI costs us time and performance. To understand why this happens, we need to have a clear picture of how a DOM works.
A DOM is represented using a tree data structure. While a tree structure might look easy to update, it comes with its challenges.
Once you update a tree node, its child nodes must be re-rendered. This re-rendering makes the UI slow. Imagine a tree with more than 100 nodes. Wouldn’t it be a time-consuming and costly affair?
Let us understand this with an example:
When you write a particular code in a console or a JavaScript file, the following things happen:
//Sample getElementById() method
Document.getElementById(‘particular id’).innerValue = ‘updated value’;
● First, the browser will parse the HTML to search the node with that particular id.
● Then, it removes the child node of that particular node.
● Next, the element(DOM) is updated with the new value.
● CSS is recalculated for the parent and child nodes.
● Lastly, the complete tree is re-rendered on the browser or display.
Re-calculating CSS and layout require complex algorithms, and these things affect the performance and consume a lot of time.
The concept of a virtual DOM that keeps the system healthy and up-to-speed was introduced as a workaround for the above challenges.
What is a virtual DOM?
A virtual DOM is the virtual representation of the real DOM. Alternatively, it is an exact copy of the real DOM. Changes are applied to the virtual DOM every time you update your application. Though a virtual DOM and a DOM might sound like two very similar concepts, they have some fundamental differences.
A virtual DOM is also represented as a tree, and each element or component is displayed as a node. A virtual DOM is created when a new piece is added to the application. When the state of any element changes in the tree, a new virtual DOM tree is built. Then a comparison happens between the previous virtual DOM and the new virtual DOM tree. This process of comparison is called diffing.
Once the diffing is complete, the virtual DOM finds the best way to implement changes to the actual DOM, leading to minimum operations on the real DOM, thereby reducing the performance cost and time incurred.
Here’s what goes on in the backend. A virtual DOM is stored in the memory and is synced with the actual DOM using a Javascript library called React DOM or React.js. This method is known as reconciliation. The declarative API mentioned in React makes this work possible. In React, you write a code for the state you want the UI to be in, and React gets the job done. This helps in manual DOM updating, attribute manipulation, and event handling.
Every UI piece is represented as a component in React, and each member lies in a particular state. Whenever a state changes, React instantaneously updates the virtual DOM tree. The moment the virtual copy is updated, it compares the present version of virtual DOM to the previously updated version.
Once React identifies which virtual DOM objects have changed, it only updates those elements in the real DOM, thus easing the system’s performance.
Advantages of using Virtual DOM
Here are a few advantages of using the Virtual DOM technique:
Optimum Memory Usage: The virtual DOM does not hold on to observables. Hence it leads to optimized memory usage.
CPU-intensive: Whenever the browser optimizes the DOM, the Virtual DOM creates a layer of scripting for these optimizations. A browser carries out optimization to create transparency for the developer in DOM manipulations. This process of adding a layer of optimization makes the React library CPU-intensive.
Better Performance: The performance becomes better since the re-rendering problem gets solved using the virtual DOM concept. Updating a web application using virtual DOM is much more economical in terms of performance and time.
Simplicity: From a coder’s point of view, implementing React and virtual DOM is simpler than re-rendering the entire web application. A JavaScript code changes the React elements, and the React elements change the DOM.
Efficiency: The most efficient way to update a web application is by using the concept of Virtual DOM. Every time a specific change happens in the React app, a new Virtual DOM tree is created for the UI. It is always convenient and efficient to render the Virtual DOM rather than the real DOM.
Conclusion
As we’ve already seen, there are many advantages of using a virtual DOM, and it is thus a given that developers prefer using a virtual DOM to save time and money. If you want to learn to react js online, opt for KnowledgeHut’s React JS training certificate course. The course will teach you every skill you need to know to become a better developer, irrespective of where you are on your react js learning path.
FAQs
Why is virtual DOM required in React?
It is used to enhance the performance of the UI. It observes and detects changes in the real DOM and then provides batch updates to the real DOM.
How many virtual DOMs does React create?
At a time, two virtual DOMs are created. One contains the updated state, while the other holds the previous form.
Where is the virtual DOM stored in React JS?
The virtual DOM is stored as a javascript object in the browser memory.
How many elements can React components return?
A valid React component can only return a single value.
References:
https://dev.to/koolkishan/what-is-virtual-dom-how-virtual-dom-works-what-is-reconciliation-what-is-diffing-algorithm-what-makes-react-so-fast-327a
https://programmingwithmosh.com/react/react-virtual-dom-explained/
https://programmingwithmosh.com/javascript/react-lifecycle-methods/
https://reactjs.org/docs/faq-internals.html
https://github.com/acdlite/react-fiber-architecture
