How React Uses Reconciliation to Update Only What Changed in the UI

React uses a process called reconciliation to avoid re-rendering the entire UI on every state change. When a component's state updates, React generates a new element tree and compares it with the previous one to identify only the necessary changes. Stable keys play a critical role in this process, allowing React to track the identity of list items across renders. Without stable keys, React may recreate component instances, leading to unexpected behavior especially when components hold local state. Changes identified during the render phase are then applied to the DOM in a separate commit phase, making React's update process both efficient and predictable.