I’ve been working with React for a while, and one of the most confusing things about React is “Virtual DOM”. Its concept and how React uses it are simple. But the reason behind the scene why React uses Virtual DOM and the arguments about the performance of Virtual DOM compared to Real DOM are endless. After some research about it, I have my opinions about these things. So today, I want to talk a little bit about it.
1. What’s Virtual DOM?
The VirtualDOM is just an in-memory copy of the actual DOM tree. It represents the element of the DOM tree in an object-like form.
2. Why does React use Virtual DOM?
To answer this question, we need to understand how React works. Each time one component is re-rendered, React rebuilds the entire UI of your web/app. If React used the Real DOM, each time we have a change in our app, React will update the entire DOM tree, not just the part which has been changed. Updating the DOM is fast, but it’s still an expensive process because, after that, the browser needs to do the layout, painting, and composition operations to render our app, all of them are expensive processes and they are really really slow. So if we update the entire DOM tree, the browser will need to re-render our app from the beginning and that process is extremely slow. Imagine when you develop and have to wait for a long time to see the changes we made, it’s nightmare. So to fit in with how React works, the React team decided to use Virtual DOM, Virtual DOM is just an object that represents the DOM tree, rebuilding Virtual DOM is much cheaper and it doesn't trigger the browser rendering process.
In the conclusion, React uses Virtual DOM because of how it works (rebuilding the entire UI on each change of component), not because Virtual DOM is faster than Real DOM.
3. Why is React faster than Angular. Is that because of Virtual DOM?
Let’s go back to what React does when we make a change on the component of our app.
First, React will build a brand new Virtual DOM then compares it with the old Virtual DOM from the previous render, React finds the update by comparing these 2 Virtual DOM objects and finally reflects the changes in the Real DOM.
So eventually, React still need to update Real DOM to reflect the changes on the browser. Instead of updating on Real DOM directly, React adds checking the differences between 2 Virtual DOM objects, does it make the complexity of updating more complex? In the previous section, we know that React uses Virtual DOM because of the way it works. So why React is still faster than Angular while it adds an additional step before updating the Real DOM? There are 2 main reasons:
- The first reason is that finding the changes on Real DOM is slower than finding changes on Virtual DOM. Virtual DOM is an object so traveling and comparison are faster.
- The second reason is React can batch the updates (we all know that the components normally re-renders when their states changed, and React doesn’t update the state immediately but it groups all the updating request and only executes the update when necessary) so the app is only re-rendered when necessary, by doing that, React can reduce the number of re-rendering as much as possible.
4. Summary
- React uses Virtual DOM because it helps React solve the performance problem with re-rendering the entire UI
- React is faster than Angular mostly by the way it groups the update of our application. Of course, using Virtual DOM is also a factor that makes React faster than Angular.
But I want to notice you guys again that: the goal of React is not performance but the way we can build the UI easier as well as reduce the bugs on development.
If you have any questions please drop a comment. Or if I made any mistake, feel free to point it out, thank you!
Top comments (0)