How UI Reconciliation Works in JavaScript

Reconciliation is the process by which modern JavaScript UI libraries, such as React, synchronize an in-memory virtual representation of the user interface with the actual browser Document Object Model (DOM). Direct DOM manipulation is computationally expensive because it triggers browser layout recalculations, reflows, and repaints. Reconciliation solves this performance bottleneck by calculating the minimum number of operations required to update the screen, applying only the necessary changes rather than re-rendering the entire UI tree.

The Role of the Virtual DOM

At the core of reconciliation is the Virtual DOM (VDOM), a lightweight JavaScript object tree that mirrors the structure of the real DOM. When an application’s state changes, the library does not immediately modify the real DOM. Instead, it creates a new Virtual DOM tree representing the updated UI. Because the Virtual DOM is merely a plain JavaScript object without browser rendering overhead, generating and traversing it is exceptionally fast.

The Heuristic Diffing Algorithm

Once a new Virtual DOM tree is generated, the library compares it against the previous Virtual DOM tree through a process called “diffing.” A generic tree-comparison algorithm has a time complexity of \(O(n^3)\), which is too slow for real-time user interfaces. UI libraries reduce this to an optimal \(O(n)\) complexity using two heuristic assumptions:

  1. Different Element Types Produce Different Trees: If an element’s root tag changes (e.g., from <div> to <span>), the library destroys the old component tree and rebuilds the new one from scratch, avoiding unnecessary comparisons between completely different structures.
  2. Keyed Lists Enable Stable Tracking: When rendering dynamic lists of child elements, developers provide a unique key attribute. The diffing algorithm uses these keys to track which items were added, removed, reordered, or modified, ensuring minimal DOM mutations during list updates.

Component-Level Comparison

When two elements of the same type are compared, the reconciliation process retains the underlying DOM node and only updates the attributes, styles, or classes that have changed. If the element is a custom component, the library keeps the component instance intact, passes down the new properties (props), and invokes the component’s render method to evaluate the subtree recursively.

Batching and Patching the Real DOM

After the diffing algorithm identifies the exact differences between the old and new trees, it generates a list of targeted DOM operations (a “patch”). Rather than applying each operation immediately, the library batches these updates together. Batching allows multiple state updates to execute in a single browser repaint cycle, eliminating layout thrashing and ensuring a fluid, high-performance user experience.