Virtual DOM

The diffing algorithm that compares the current Virtual DOM tree with its previous snapshot to compute the minimal set of mutations required to update the real DOM. React's reconciler uses a heuristic O(n) algorithm based on two assumptions: elements of different types produce different trees, and developers can hint at stable identities using the key prop. This process is the core mechanism that makes declarative UI performant by batching reads and writes to the real DOM.

The specific algorithm that powers reconciliation. When diffing two trees, the algorithm first compares root elements. If types differ (e.g., <div> to <span>), the entire old subtree is destroyed and rebuilt. If types match, only attributes are updated. For lists of children, the algorithm relies on key props to identify which items have changed, been added, or been removed, avoiding costly index-based re-renders that can cause incorrect state preservation.

A complete rewrite of React's core reconciliation engine introduced in React 16. Fiber transforms the synchronous, recursive tree traversal into an asynchronous, incremental rendering model. It represents each component as a unit of work with a corresponding Fiber node, allowing the scheduler to pause work, prioritize updates (e.g., animations over data fetches), and resume later. This enables features like concurrent rendering and prevents long-running tasks from blocking the main thread.

A programming model where the UI is described as a pure function of application state: UI = f(state). Instead of issuing imperative commands to mutate the DOM directly, developers declare what the UI should look like for a given state. The Virtual DOM is the runtime that bridges this declarative model to the imperative browser APIs. This paradigm eliminates entire categories of bugs related to manual DOM synchronization and state tracking.

A performance optimization where multiple state updates are grouped into a single reconciliation pass and DOM commit. In React 17 and earlier, batching only occurred inside event handlers; updates in promises or timeouts caused separate renders. React 18 introduced automatic batching for all updates, regardless of origin. This reduces the number of re-renders and prevents the user from seeing intermediate, partially-updated UI states.

A special string attribute used to give elements a stable identity across renders. When rendering lists, keys help the reconciler determine which items have changed. A stable, unique key (like a database ID) allows the algorithm to reuse existing DOM nodes and preserve component state. Using array indices as keys is an anti-pattern when the list can reorder, as it can cause incorrect state mapping and unnecessary re-renders of unchanged items.