A new virtual DOM representation is generated whenever the state of a component or its props changes. A diffing algorithm compares the new virtual DOM with the previous one, determining the minimal number of changes needed for the real DOM to be updated.
The real DOM is then synchronized with the virtual DOM once the differences are identified through diffing. The React library updates only the sections of the DOM that have changed, resulting in an efficient update and a minimal impact on performance.
By using the virtual DOM, React avoids expensive and time-consuming operations such as directly manipulating the real DOM. As a result, it batches multiple changes together and updates the real DOM more efficiently.
As a result, React applications become more responsive and faster to render, as the virtual DOM minimizes the number of manipulations and updates to the actual DOM.
|Real DOM||Virtual DOM|
|Performance||When dealing with large and complex web applications, manipulating the real DOM can be slow and inefficient. Reflow and repaint caused by changing the real DOM can cause performance bottlenecks and slow UI updates.||Virtual DOMs are designed to optimize performance. To determine the minimum changes needed to update the real DOM, React updates the virtual DOM first before updating the real DOM. By reducing the number of actual manipulations on the real DOM, updates are faster and more efficient.|
|Updates||In the event of changes to the real DOM, including adding, modifying, or removing elements, the browser recalculates the layout, redraws the affected UI elements, and handles any events that may be associated with the changes. Especially if more than one change is made quickly, such updates can be computationally expensive.||By using the virtual DOM, React batches multiple changes together and updates the real DOM efficiently. By diffing the virtual DOM with the real DOM, React determines what minimal changes need to be made. As a result of this approach, the number of actual updates on the real DOM is minimized, which improves performance.|