React's performance advantage over direct DOM manipulation stems from its Virtual DOM and reconciliation algorithm. Instead of making costly, frequent updates to the real DOM—which trigger browser reflows and repaints—React creates a lightweight JavaScript object tree representing the UI. It then compares this new tree to the previous version, calculating the minimal set of changes needed.

This process, called diffing, is why adding a key prop to list items is critical. Without unique keys, React struggles to identify which items have been added, removed, or reordered, leading to inefficient updates and potential bugs like lost component state. Using array indexes as keys is a common pitfall.

The reconciliation algorithm follows specific rules: elements of different types are rebuilt from scratch, while elements of the same type have their props updated. React 18+ enhances this with concurrent rendering, allowing it to pause and prioritize work for a more responsive user experience. Understanding these mechanics is essential for writing efficient, bug-free applications.