React Virtual DOM. What is it?
Tuesday 17th January, 2023
You will learn about React Virtual DOM and the difference with the Real DOM.
DOM stands for ‘Document Object Model’. In simple terms, it is a structured representation of the HTML elements that are present in a webpage or web-app. DOM represents the entire UI of your application. The DOM is represented as a tree data structure. It contains a node for each UI element present in the web document. It is very useful, as it allows web developers to modify content through JavaScript. Also, being in structured format, it helps a lot, as we can choose specific targets and all the code becomes much easier to work with. If you want to learn more about DOM, visit this link.
DOM manipulation is the heart of the modern, interactive web. Unfortunately, it is also a lot slower than most JavaScript operations.
This slowness is made worse by the fact that most JavaScript frameworks update the DOM much more than they have to.
As an example, let’s say that you have a list that contains ten items. You check off the first item. Most JavaScript frameworks would rebuild the entire list. That’s ten times more work than necessary! Only one item changed, but the remaining nine get rebuilt exactly how they were before.
Rebuilding a list is no big deal to a web browser, but modern websites can use huge amounts of DOM manipulation. Inefficient updating has become a serious problem.
To address this problem, the people at React popularized something called the virtual DOM.
Why Virtual DOM?
In React, for every DOM object, there is a corresponding “virtual DOM object.” A virtual DOM object is a representation of a DOM object, like a lightweight copy.
A virtual DOM object has the same properties as a real DOM object, but it lacks the real thing’s power to directly change what’s on the screen.
Manipulating the DOM is slow. Manipulating the virtual DOM is much faster, because nothing gets drawn onscreen. Think of manipulating the virtual DOM as editing a blueprint, as opposed to moving rooms in an actual house.
Virtual DOM is like a preparation stage for passing the changes to the Real DOM. We only pass the changes according to the changed components and, thus, the Real DOM isn’t overloaded.
When new elements are added to the UI, a Virtual DOM, which is represented as a tree, is created. Each element is a node on this tree. This tree is then compared or “diffed” with the previous virtual DOM tree.
The image below shows the React virtual DOM tree and the diffing process.
Once this is done, the Virtual DOM calculates best possible method to make these changes to the Real DOM. This insures, that there are minimal operations on the real DOM.
Hence, reducing the performance cost of updating the Real DOM.
In other words, the difference between the previous version of the virtual DOM tree and the current virtual DOM tree is then calculated. The whole parent subtree then gets re-rendered to give the updated UI. This updated tree is then batch updated to the real DOM.
Difference between Virtual DOM and Real DOM
What is DOM?
DOM stands for Document Object Model it is the structural representation of all nodes in an HTML document DOM represents the Ul of your applications. DOM manipulation is required to dynamically change the content of a web page. DOM is an interface that allows the script to update the content, style, and structure of the document.
Real DOM
The DOM represents the web page often called a document with a logical tree and each branch of the tree ends in a node and each node contains object programmers can modify the content of the document using a scripting language like javascript and the changes and updates to the dom are fast because of its tree-like structure but after changes, the updated element and its children have to be re-rendered to update the application UI so the re-rendering of the UI which make the dom slow all the UI components you need to be rendered for every dom update so real dom would render the entire list and not only those item that receives the update.
You can learn more by following my social media:
Support my blog by this link: https://buymeacoffee.com/edx126
Schedule a Call
Posted by Edgar Hovhannisyan