We sing praises to React's performance when it comes to handling page updates, data binding etc. But there are lot's of things that happens behind the scenes for achieving this performance. One of the influencing factors is the Virtual DOM.
Wait now, There was this concept of DOM and now you are telling me there is this whole new thing called Virtual DOM. What is going on?. Before we go any further let's understand what is actually DOM.
Yeah DOM is great for simple, static sites and sites with very few UI updates. But then when people started to move towards more UI, Mobile, Responsive driven approach to create websites they started to see the drawbacks of DOM.
DOM is highly inefficient when it comes to figuring out what exactly needs to be updated. Sometime it might update more than what's necessary. For Example, Let's consider a scenario. You have an
<ul> with a list of
<li> items which generated from an array of values. Now when one of the values in the array changes the whole list gets re-rendered which is unnecessary as only one item got updated.
Typically these steps take place whenever a single DOM mutation call occurs:
- Traverse the DOM till the position where the node must be inserted or updated.
- Update the DOM node or add it.
- Recalculate positions and CSS.
- Traverse again and repaint the node on the page.
Those 2 points coupled with the rise of Single Page Applications (SPAs) which typically has huge amount of DOM nodes, DOM mutations and listeners listening to the site for changes led for people to come up with frameworks to bypass these performance concerns.
Basically, if DOM is the actual building then Virtual DOM is the blueprint of the building. The core idea is it's always easy and fast to modify the blueprint than the real building.
The 2 ways of implementing a Virtual DOM are:
- Dirty Check: Which involves periodically checking the components for changes.
- Observable: Which involves listening to changes via listeners to find out the components that has to be updated.
As guessed React uses the latter way of implementation and this is one of the major reasons for react having a one-way data binding and it's amazing performance.
Wow, All of this is nice. But how is it implemented in React?
The process of updating the DOM nodes based on component updates is usually done by the ReactDOM library. The following usually happens in this process:
- Batch Updating the real DOM
When an update like
Once the steps to update are identified the ReactDOM puts all of those in a single call in the Event Loop. ReactDOM orders these steps in such a manner it only calls the repaint of DOM as the last step. So once all the steps are executed the Event Loop then calls the DOM repaint thus during the entire process only once the DOM gets repainted leading to a faster performance. When an update in the component occurs while ReactDOM is updating the real DOM it will wait for the real DOM update to finish.
And that's how the React's Virtual DOM leads to an amazing performance which has become a trademark of React. So while creating React applications please keep these concepts of Virtual DOM in the mind in order to utilize the performance boost given by React to it's full potential.