What is Virtual DOM?
ReactJS uses "Virtual DOM" to optimize HTML rendering, making web applications faster. What is virtual DOM, and how does ReactJS use it?
Querying DOM elements and updating them are light and fast operations. However, the DOM changes will reflect on the web page after a re-render.
Kindly read my previous post, where you can find more about DOM and the process of web page re-render. Browser handles re-render and updating the DOM multiple times might result in poor web page performance.
To optimize browser re-renders, ReactJS and some other frameworks use a concept called “Virtual DOM”.
In this week’s post, we’ll discuss Virtual DOM and how it is used to optimize web page performance.
What is Virtual DOM?
The Virtual DOM is only a virtual representation of the DOM. Every time the state of our application changes, the virtual DOM gets updated instead of the real DOM.
When a ReactJS application loads in a browser, a virtual DOM is created and used whenever there is a state change.
Let us take a sample HTML page to understand how this works.
How does Virtual DOM optimize performance?
We saw the process that the browser handles for a web page rendering in my previous post. For complex web applications with numerous components, re-rendering becomes costly for every state update and affects performance.
Virtual DOM keeps track of the updates in DOM and re-renders only the elements that need updates instead of rendering the whole page.
To understand the rendering using Javascript, refer to this article by Ibadehin Mojeed, where he explains component re-rendering using working examples.
1) State changes to Virtual DOM
When the current state in DOM is changed, ReactJS updates the virtual DOM about the changes. The virtual DOM keeps track of the changes and the DOM elements involved.
Let us consider a case where we update the text of the paragraph tag in our HTML page.
2) Checking the difference between DOM and virtual DOM
The virtual DOM then checks the difference between the current DOM and Virtual DOM for changes in component states.
Without virtual DOM, the browser would start the re-render process as and when it notices the change in the DOM state.
The re-render would have happened for the entire DOM, which is costly.
Virtual DOM checks the difference and considers the elements that need change. The unchanged elements are not considered for the re-render process.
3) Changes updated to actual DOM
After checking the difference, only the changed elements are updated in the actual DOM.
This triggers a re-render process only for those updated elements and not for the entire DOM. Thus, reducing the rendering time.
Refer to this amazing gif created by Tapas Adhikary, which shows how virtual DOM handles updates.
Batching updates
ReactJS also uses virtual DOM to batch multiple updates into one render. If there are few updates on the DOM in a short period, triggering re-renders for every update would cost us performance.
Virtual DOM is updated for each state change and keeps track of all the updated elements.
Then, the virtual DOM checks the difference with the current DOM for all of these state changes. This significantly increases performance for large applications.
Useful resources:
ReactJS and Virtual DOM - https://blog.greenroots.info/reactjs-virtual-dom-and-reconciliation-explain-like-im-five by Tapas Adhikary. Follow him for amazing content on Web development.
Browser DOM rendering - https://blog.logrocket.com/what-virtual-dom-react/
I hope this gives a basic understanding of how ReactJS uses virtual DOM to optimize the performance of web applications.
Until next time!
Hey, great read!
Thanks for mentioning my work, means a lot.