If you are a UI Developer working with React you must have heard about the term “Virtual DOM”. Since it is one of its important concepts and also the reason to such a high performance when updating the DOM, I am here which this article to discuss what is virtual DOM, how it has helped ReactJS in making DOM manipulation efficient.
Why is DOM manipulation slow?
The DOM is represented as a tree data structure. Because of updates to the DOM are fast.
DOM was never optimized for creating dynamic UI. The problem is that after the change, the updated element along with its child elements needs to be re-rendered to update the UI of the application. This step involves parsing of the styles, applying it to the elements and then re-rending the tree. The re-rendering of the UI is what makes it slow.
For example, consider a list that is being rendered inside the DOM. If one of the items in the list changes, the entire list gets rendered again instead of just rendering the item that was changed/updated. This is called inefficient updating.
If it sounds as a very light process let me tell you, this updating involves below steps –
- The browser has to parse the HTML
- Remove the element changed.
- Update the DOM.
- Re-calculate the CSS for the element and update the layout.
- Traverse the render tree and paint it on the UI.
Now think, We tried to update the real DOM just once. What if there is a need to update the real DOM multiple times, the above steps will also repeat multiple times which will be expensive and performance heavy.
Understanding Virtual DOM
The Virtual DOM is just a virtual representation of the DOM. Every time the state of our application changes, the virtual DOM gets updated instead of the real DOM.
Since each element is a node in the DOM tree, each time a change occurs in any of these elements a new Virtual DOM is generated with the resulting tree. Since this DOM is virtual, the graphical interface is not yet updated, but the real DOM is compared with this virtual DOM with the objective of calculating the most optimal way to make the changes. This reduces the cost in terms of performance of updating the real DOM.
How is Virtual DOM faster?
With new elements added to the UI, a virtual DOM is created. Each element is represented as a node in the DOM tree. If the state of any of these element in the DOM changes, a new virtual DOM tree is created. This tree is then compared with the existing virtual DOM tree. After this, the virtual DOM calculates the best possible way to make these changes to the real DOM, i.e minimal operations on the real DOM. Hence, reducing the performance cost of updating the real DOM.
How does React use the Virtual DOM?
In React, each piece of the UI is a component. Each component has an internal state. This state is observed by the library in order to detect changes in it. When a change occurs, React updates the tree of its Virtual DOM and follows the same process to transfer the resulting changes to the UI.
React follows a batch update strategy to update the real DOM. This leads to increased performance. It means that updates to the real DOM are sent in batches, instead of sending updates for every single change in state.
React using the diff algorithm to find the minimum number of steps to update the real DOM. Once it has these steps, it executes all the steps in one event loop without involving any steps to repaint the real DOM. Thus, if there are more element which gets updated React will wait for the event loop to finish. Then after, in bulk will update the real DOM with all the updated elements.
The repainting of the UI is the most expensive part, and React efficiently ensures that the real DOM receives only batched updates to repaint the UI. Once all the steps are executed, React will repaint the real DOM , i.e during the event loop real DOM is being painted only once. Thus all the layout process will run only on time for updating the real DOM.
This allows React to perform better than other libraries which manipulate the DOM directly.
- Occurrence of frequent DOM manipulations leads to negative influence on performance.
- Virtual DOM is a virtual representation of the real DOM.
- When state changes occur, the Virtual DOM is updated to then make a comparison between this new version and the old one of the real DOM.
- The virtual DOM sends a batch update to the real DOM to update the UI. This is to enhance its performance.
- React uses an efficient diff algorithm to compare the versions of virtual DOM.
. . . . .
Thanks for reading. Hope get some idea on virtual DOM and its use in ReactJS.