DOM Diffing

Whenever there is a change in the state of the UI elements, a new virtual DOM is created. Then the new virtual DOM and the previous virtual DOM are compared with each other. This comparing is called DOM diffing.

The intention is to perform minimal operations on the real DOM, hence after diffing, the best way to update the real DOM is calculated, leading to an efficient update of the UI.

The following image shows the diffing process:

The image shows that the update on the real DOM is postponed as further as possible. The red node represents state change; then, the changes are calculated through DOM diffing, and finally, the new virtual DOM is batch updated to the real DOM.

DOM Diffing or Document Object Model Diffing is the concept of comparing the DOMs before and after the modification and ensuring efficient updates. Before understanding DOM Diffing deeply, we should know what DOM is and what is its purpose.