DOM is short for “Document Object Model.” The Document Object Model represents the User Interface (UI) of your application. Every time the developer alters the state of the UI, the DOM gets updated to represent the change in edits. Frequent manipulating of the DOM affects the performance of the DOM causing it to slow down significantly thus, affecting the overall state of your application.
The DOM is represented as an upsidedown tree data structure. Due to its structure, frequent changes and edits to the DOM are quite fast. However, after each change in the application UI, the updated element and its children have to be re-rendered to update the UI. Therefore, it is the frequent manipulation that slows down the DOM. If your UI is component-rich, then it will be more expensive for the DOM to do updates since they would have to be all re-rendered for every update.
Virtual Dom performs significantly stronger than the real DOM because it is much faster and efficient. The virtual Dom is a virtual representation of the real DOM. Instead of the real DOM updating each time here, the virtual DOM instead gets updated each time the state of the application changes. A virtual DOM is created each time new elements in UI are added. Each element of these elements are a node on the tree. A new virtual DOM tree is made when any changes occur within the elements as well. The previous virtual DOM tree then compares itself to this tree.
The Virtual DOM then calculates the smartest method to make the changes within the real DOM. By doing this, the virtual DOM ensures that there are minimal operations in the real DOM. Therefore, helping to reduce the cost of performing the updates in the real DOM. Every UI piece in React is a component with its own state. This is how React leverages the virtual DOM by following and listening for patterns and changes in the state. Whenever a component states changes, React updates the Virtual DOM tree. React then compares the current and previous virtual DOMs after the virtual DOM has been updated. This process is called “diffing”.
After React determines if the virtual DOM has been changed it then only updates those objects in the real DOM. This process performance is better and more efficient in comparison to directly manipulating the real DOM.
React then utilizes the mechanism of batch updating to update the real DOM which helps with increasing the performance. Simply, any update to the real DOM is sent to the batches instead of sending the updates to every change in state. React efficiently ensures that changing the UI is stressfree and that the real DOM only receives the batched updates only.