Virtual DOM VS Real DOM & Reconciliation Algorithm In React

What is the Real/Actual DOM?

The Real DOM (Data Object Model), is the browser’s representation of a web page’s HTML structure. When the user interacts with a web page, for example submit form data, the browser updates the Real DOM to reflect the changes then re-renders the page to display the updated HTML.

What is the Virtual DOM?

The Virtual DOM is an abstraction of the Real DOM, created and maintained by React library. The Virtual DOM is a lightweight in memory copy of the Real DOM, which allows for faster updates and improved performance. When a user interacts with a web page, React updates the Virtual DOM, compares it with the previous DOM, and only updates the Real DOM with the necessary changes. This process is known as Reconciliation.

Differences between the Virtual DOM and Real DOM

1?? The Real DOM is slower than the Virtual DOM, as every update requires the browser to recalculate the entire document layout. However, the Virtual DOM is a lightweight copy of the Real DOM, which allows for faster updates and improved performance.

?2?? The Real DOM is a tree structure, and every node has an attached event listener. When a user interacts with a web page, the browser executes the corresponding event listeners. This process can be slow and resource intensive. In contrast, the Virtual DOM updates are more efficient, as event listeners are only attached to the root node and not every individual node.

?3?? The Virtual DOM is flexible and can be used with any programming language that can run JavaScript. In contrast, the Real DOM is tightly coupled with the browser and can only be manipulated using JavaScript.

React Reconciliation Algorithm

Reconciliation is the process by which React updates the UI to reflect changes in the component state.

?

React uses a virtual DOM (Document Object Model) to update the UI. The virtual DOM is a lightweight in-memory representation of the real DOM, which allows React to make changes to the UI without manipulating the actual DOM. This makes updates faster, as changing the virtual DOM is less expensive than changing the real DOM.

?The reconciliation algorithm works by comparing the current virtual DOM tree to the updated virtual DOM tree and making the minimum number of changes necessary to bring the virtual DOM in line with the updated state.

?

The reconciliation algorithm uses two main techniques to optimize updates:

1?? Tree diffing: React compares the current virtual DOM tree with the updated virtual DOM tree and identifies the minimum number of changes necessary to bring the virtual DOM in line with the updated state.

?

2??Batching: React batches multiple changes into a single update, reducing the number of updates to the virtual DOM and, in turn, the real DOM.

In summary,

The Real DOM is the browser’s representation of a web page’s HTML structure, But, the Virtual DOM is an abstraction of the Real DOM created and maintained by React library. The reconciliation algorithm is important for React’s performance and makes React one of the fastest and most efficient JavaScript libraries for building user interfaces. The reconciler compares the current and updated virtual DOM, identifies the differences and makes the necessary changes to the virtual DOM to bring it in line with the updated state.