During my study of frontend development, I’ve found DOM (Document Object Model) and Virtual DOM (Virtual Document Object Model) pretty confusing. If you’re a fellow beginning developer, you might have the same problem; that’s probably why you're reading this article right now.
DOM and Virtual DOM have their roles to play in React. In this article, you’ll learn what they are, their differences, and how to apply them in React. Let's begin!
What is React?
Meta created React (also called React.js or ReactJS) in 2013. It’s a free, open-source JavaScript library that developers use to create user interfaces based on UI components and [single-page applications](https://developer.mozilla.org/en-US/docs/Glossary/SPA#:~:text=An%2520SPA%2520(Single%252Dpage%2520application,content%2520is%2520to%2520be%2520shown.).
What is DOM in React?
DOM, or Real DOM, is an acronym for Document Object Model. It’s simply the UI of an application. When your application changes, the DOM updates to reflect the change. DOM represents the structure and content of a website in the form of a tree. With DOM, scripts and webpages can manipulate, modify and identify the components of a website.
The Inefficiency of DOM
DOM is slow, unlike modern-day websites, which are fluid and reflect modifications almost immediately. DOM was intended for earlier websites, which were static because they were rendered by the server. By contrast, modern-day websites carry out rendering in the browser. Therefore, when using React DOM for modern websites, it’s slow. This is why Virtual DOM exists.
What is Virtual DOM?
Meta created Virtual DOM. It’s open-source and managed by the React team. Virtual DOM is simply a copy of DOM. It has all the components and features of the DOM, but it cannot display the page of a website in a browser.
When there are a large number of elements in your DOM, it can be taxing to carry out updates using DOM. However, because of React Virtual DOM’s observable pattern, it’s considerably faster.
React Virtual DOM has all of its constituents waiting for a change in their state. Immediately after there's a change, the it updates, and in turn, it aligns the change with the DOM, which causes the page to change in response.
Why is Virtual DOM Faster?
When new elements are added to the UI, it creates a new Virtual DOM tree. On the tree, the elements are represented by colored spots. If any of the elements change, it creates a new tree. We then compare the new tree to the former tree to see which method is best to apply changes to the DOM.
Here's a visual representation of the explanation:
As a result, the DOM does less work, which reduces the performance cost of updating it.
The Benefits of Virtual DOM
Better Performance
Virtual DOM speeds up the performance of a website significantly. Due to the observable pattern, React can acknowledge and immediately update the part of the DOM that should be changed.
Increased Productivity
It makes it easier to build web applications. With the increase in the growth of React, developers are more productive.
Higher Memory Usage
It makes CPU and memory usage more efficient because it adds an additional layer of JavaScript to the browser.
How Does React Work with Virtual DOM?
In React, each piece of UI is a component, and each component has a given state or condition. React pays attention to the observable pattern and to changes in state. When there is a change in a component, React immediately updates the Virtual DOM tree. After it updates, React compares the new tree with the former tree in a process called 'diffing'.
After identifying the changed tree, React updates the objects that have been changed in the Real DOM.
React’s Rendering Function
Render() is the process that updates and renders UI. The lifecycle method in React is render().
The render() function creates the tree containing the React elements. When the state of a component is updated, render() provides a different tree containing the new React elements. By using setState() in the component, React immediately identifies the change in the state of the component and then re-renders it.
After that, React finds a way to update the UI so that the recent changes can be reflected. At this point, React updates its Virtual DOM, and in turn, updates the changed objects on the real DOM.
Batch Updates
Updates to the Real DOM are sent in batches to repair and repaint the UI, leading to increased performance. This is better than sending updates on every single change.
Conclusion
Understanding DOM and Virtual DOM is crucial for web developers. Now that you've learned the exact difference between them, I hope it increases your growth and knowledge in web development.
Top comments (1)
Ok, its actually really simple: a website consists of HTML nodes. Each node is represented in the DOM. This node in the DOM can be changed using JavaScript, we call this DOM manipulation. From the days of jQuery we learned that doing a lot of (inefficient) DOM manipulation can make a website slow and its hard to keep track of which nodes actually need to be changed. For this reason a lot of different FE frameworks were created. Angular, React, Vue, etc. React manages DOM manipulation by first making the changes in something they call the virtual DOM. Its not much more than an in memory copy of the actual DOM that does not trigger the browser to do anything. React applies your changes to the virtual DOM and it detects which nodes actually changed and then it applies those changes to the actual DOM. Regardless of which framework you use, all websites that use JavaScript for interactivity do DOM manipulation at some point.
So in one sentence: the virtual DOM is a middleman that applies changes to the actual DOM in a highly optimized way.