Why does React re-render? What's the virtual DOM doing under the hood? Understanding React's reconciliation (diffing) algorithm helps you write faster components and avoid common performance pitfalls.

# Understanding React's Reconciliation Algorithm When your component's state or props change, React needs to figure out what changed in the UI and update the DOM efficiently. This process is called **reconciliation**. ## The Virtual DOM React maintains a lightweight in-memory copy of the real DOM called the virtual DOM (vDOM). When state changes, React creates a new vDOM tree and diffs it against the previous one. ## Two Key Heuristics React's diffing algorithm relies on two assumptions: 1. **Elements of different types produce different trees.** If a `<div>` becomes a `<section>`, React tears down the old tree and builds fresh. 2. **The `key` prop signals stable identity across renders.** This is why keys matter in lists. ## List Diffing Without Keys ```jsx // React diffs top-to-bottom — inserting at the front is O(n) mutations <ul> <li>B</li> <li>C</li> </ul> // After prepending A: <ul> <li>A</li> {/* React sees a changed item */} <li>B</li> {/* Changed */} <li>C</li> {/* Changed */} </ul> ``` ## List Diffing With Keys ```jsx <ul> {items.map(item => <li key={item.id}>{item.name}</li>)} </ul> ``` React uses keys to match old and new nodes by identity, avoiding unnecessary mutations. ## Practical Implications - **Stable keys** should come from data (IDs), never array indices. - **Avoid changing component type** at the same position—use CSS to hide/show instead. - **Use `React.memo`** to bail out of re-renders when props haven't changed. - **Use `useMemo` and `useCallback`** to stabilize object/function references passed as props. Understanding reconciliation turns "why is my app slow?" into a solvable debugging problem.