Share
What is virtual DOM? How does react use the virtual DOM to render the UI?
Question
- Virtual DOM is a concept where a virtual representation of the real DOM is kept inside the memory and is synced with the real DOM by a library such as ReactDOM.
- DOM manipulation is an important part of any web application, but DOM manipulation is quite slow when compared to other operations in JavaScript.
- The efficiency of the application gets affected when several DOM manipulations are being done. Most JavaScript frameworks update the entire DOM even when a small part of the DOM changes.
- 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.
- To address the problem of inefficient updating, the react team introduced the concept of virtual DOM.
- For every DOM object, there is a corresponding virtual DOM object(copy), which has the same properties.
- The main difference between the real DOM object and the virtual DOM object is that any changes in the virtual DOM object will not reflect on the screen directly. Consider a virtual DOM object as a blueprint of the real DOM object.
- Whenever a JSX element gets rendered, every virtual DOM object gets updated.
Updating every virtual DOM object might be inefficient, but that’s not the case. Updating the virtual DOM is much faster than updating the real DOM since we are just updating the blueprint of the real DOM
- React uses two virtual DOMs to render the user interface. One of them is used to store the current state of the objects and the other to store the previous state of the objects.
- Whenever the virtual DOM gets updated, react compares the two virtual DOMs and gets to know about which virtual DOM objects were updated. after knowing which objects were updated, react renders only those objects inside the real DOM instead of rendering the complete real DOM. react solves the problem of inefficient updating with the use of virtual DOM.
Leave an answer