React Reconciliation Works in Two Phases, Not One — Here Is Why It Matters

A common misconception among React developers is that reconciliation works by comparing the Virtual DOM directly against the real browser DOM. In reality, React splits the update process into two distinct phases: the Render Phase, where it compares two Virtual DOM trees entirely in JavaScript memory, and the Commit Phase, where it applies only the flagged changes to the actual browser DOM. In a component with 100 divs, React may re-evaluate all 100 in memory but will only update the single real DOM element that changed. This means reconciliation is not about preventing JavaScript re-renders, but about minimizing expensive browser repaints. Understanding this distinction helps developers target performance optimizations more accurately.