React’s Virtual DOM vs Real DOM

No matter whether you are a React learner or a developer, you must have come across the term “Virtual DOM”. Isn’t it? If you are wondering about why React uses Virtual DOM and how it is so faster than real DOM then this blog is for you.
But Wait…Do you know what is a Real DOM and how a Virtual DOM is different from a Real One? If no, then we have got some answers for you.

Let’s get started.

What is DOM anyway?

DOM stands for Document Object Model. It is the structural representation of all nodes in the HTML document. A Web page is a document that can be either displayed in the browser window or as an HTML source. The DOM represents the UI of your application. DOM manipulation and updation is required to dynamically change the content of the web page. Every time there is a change in the state of your application UI, the DOM needs to be updated to reflect the change.

Why is DOM manipulation Slow?

The DOM represents the web page often called a document with a logical tree. Each branch of the tree ends in a node and each node contains objects. Programmers can modify the contents of the document by using a scripting language like Javascript. The changes and updates to the DOM are fast because of its tree-like structure but after changes the updated element and it’s children have to be re-rendered to update the application UI. Thus it’s the re-rendering of UI which makes the DOM Slow. All the UI components you have needs to be rendered for every DOM update. Thus real DOM would render the entire list and not only those items that receive updates.

*Parents/Children in DOM: The nodes in the DOM are referred to as parents, children, and siblings. The one level above node to any node is called its parent and one level below node to any node is called its children.

Need for Virtual DOM

Rebuilding the entire list is not a big task to any web browser, but today’s highly dynamic and interactive websites can use huge amounts of DOM manipulation which results in the slowness of the application UI. Most Javascript frameworks update the DOM much more than that is required and rebuild the entire list each time it updates the DOM which in turn decreases the performance and overall efficiency of the application. This serious issue is solved by using something called Virtual DOM and is took forward by people at React.

Virtual DOM

Virtual DOM as the name suggests is the Virtual representation of the real DOM and is local to React. Every time the state of application changes, React does those changes in the Virtual DOM first and then sync the real DOM accordingly. A Virtual DOM object has the same properties as a real DOM object but it does not have the powers to directly reflect the changes on the screen. But the question still remains the same, how it is faster than the real DOM?

How React’s Virtual DOM is faster than real DOM?

It’s the magic of Diffing Algorithm that allows updating the Virtual DOM much faster than real DOM. When new elements are added to UI, a virtual DOM is created, and if the state of any of these elements changes, a new virtual DOM tree is created. This new tree formed is then compared to the previous virtual DOM tree. Once the comparison is done, the virtual DOM figures out the best possible way to make the required changes to real DOM, ensuring minimal operations in real DOM and hence increasing the efficiency of the application UI. Likewise in React whenever the state of any component changes, React updates the Virtual DOM tree which is then compared with the previous version of virtual DOM tree and figures out which virtual DOM objects have changed. This process is called “Diffing”. React updates only changed objects in the real DOM which makes the performance far better as compared to manipulate the real DOM directly.

The use of Virtual DOM in React provides developers with superior development experience.
If you are looking to mastering React, I highly recommend taking React course on Eduzek.

Hope you like this post. Please share it with your friends and colleagues.