Virtual DOM In React: A Simple Guide In 2021

Introduction

When learning or using React or learning React, the terms DOM, Real DOM, virtual DOM in React and Virtual DOM are frequently used. Here is discussed what these terms are, the differences and why Virtual DOM is preferred in ReactJS.

1. Real DOM
2. Virtual DOM
3. How is Virtual DOM faster?
4. How does React use Virtual DOM?
5. React’s function render()
6. Batch Update

1. Real DOM

What does DOM stand for? DOM is an acronym for “Document Object Model” and is the user interface UI of the application. Every time change of state or property occurs in the application UI, the DOM is updated via a batch update to show the changes occurring. However, frequent manipulations to the DOM are detrimental to system performance making its responses slow.

2. Virtual DOM

What is a virtual DOM? To avoid this situation, the virtual DOM concept is very handy and its performance much more effective than the real DOM suffering frequent manipulations of property or state. It is just a virtual representation of the real DOM and hence called virtual DOM.

Thus whenever a state of change occurs in the application, the virtual DOM in React reads, compares with the older version and gets updated instead of directly affecting changes to the real DOM. The real DOM is then updated using a batch update from the virtual DOM keeping the process more efficient, fast and free of slowing down of the real DOM.

3. How is Virtual DOM faster?

Firstly, what is virtual DOM and what causes the DOM manipulation to slow it down? The answer is that the DOM has a tree structure and is represented visually in computer language as a tree data structure. Hence changes occurring are updated across the DOM structure very rapidly. However, these changes need to be repainted or re-applied to the application UI and all children elements by the DOM which slows it down.

The more the number of UI components connected the longer it takes and gets more expensive to render an update. Also, note that every update or change of property/ state needs to re-render across all UI components and the application itself each time a change occurs. Consider the addition of a new element like the virtual DOM when it is added to the UI. A tree data-structure is created with a virtual DOM, where each element on it is represented as a tree-node. When the state of any of these node elements changes, the virtual DOM tree is also changed and the virtual tree ‘diffs’ or compares the changes to the previous state of the virtual DOM tree.

The virtual DOM React then calculates the best method using the React algorithm to affect the change to the real DOM and ensures the use of minimal resources and operations. Once done the virtual DOM in React sends this information to the real Dom in what is called a batch update which the real DOM uses to repaint all the elements and UI application. 

4. How does React use Virtual DOM?

So, how does ReactJS work and leverage the virtual DOM? What is react DOM? In JSReact, every component is a UI piece and each component will have a state at any given point in time. 

React listens for state changes and follows the observable pattern changes. Whenever the component’s state or properties change, React updates the tree representing the virtual DOM in React. The virtual DOM when updated causes React to compare the changes and the current virtual DOM version to the previous virtual DOM version in a process known as “diffing” or differentiating.

Once React is aware of the changes to the virtual DOM in React objects whose states have changed, it updates only those changed objects for re-painting in the real DOM. This makes unnecessary and frequent changes of all elements unnecessary and the performance improves vastly when compared to affecting direct changes to the real DOM. far better when compared to changing or manipulating the real DOM directly. Also, it saves time in affecting the changes only to the changed elements and not all components. This then makes React, the JavaScript library’s performance more efficient and praise-worthy in terms of efficiency.

Thus, one just needs to inform React about the state one wants the virtual DOM in React and the UI to be in and it will make sure that the real DOM applies changes and matches that state. Hence, developers need not learn manual DOM updates, attribute manipulation or event handling as all these changes are affected automatically and behind the scenes. Given below are how to affect these changes in React.

5. React’s function render()

render() is the React function needed to render and update the UI. It is render() which is the required React lifecycle method. The render() function is applied to the point of entry which is where the React tree elements are created. If and when a prop or state change within the component is changed/updated, this function returns to the different/ changed tree of React elements.

When the setState() function is used within the component, React detects the state change immediately and re-paints or re-renders the component and decides how to efficiently update the real DOM and UI to match this recent tree change. It then proceeds via the virtual DOM in React updates to its virtual DOM to update the real DOM to affect changes to only the object that has a state change in the real DOM.

6. Batch Update

React uses the batch update function to update the real DOM. As a result, it improves the performance of the real DOM. A batch update is when the virtual DOM in React sends batches of updates to the real DOM. Such batches are sent instead of sending every single update for every single change in the component’s state or prop. Also since re-rendering is the most expensive and time-consuming part of the updating process the use of React ensures better performance and efficiency as the real DOM receives only updated batches of changes to repaint the UI.

Conclusion

In the above discussion, one has answered questions on what is virtual DOM in React? Frequent DOM manipulations make it performance heavy and expensive. The real DOM’s virtual representation is called Virtual DOM. The diffing process updates the virtual DOM in React and performs a comparison of the current and previous versions when so ever state changes occur. It then sends a batch update to update the UI to the real DOM.

React enhances its performance using a virtual DOM while using the observable changes to detect and update the property and state changes. React also uses an efficient differential algorithm when comparing virtual DOM versions before sending update batches to re-render or re-paint the real DOM.

If you are interested in making a career in the Data Science domain, our 11-month in-person Postgraduate Certificate Diploma in Data Science course can help you immensely in becoming a successful Data Science professional. 

ALSO READ

• 100 Important Selenium Interview Questions (2021)