How does React figure out what needs to change on the page?

React's reconciliation algorithm is the process by which React updates the DOM. When a component's props or state change, React needs to determine whether an actual DOM update is necessary. It does this by comparing the newly returned element with the previously rendered one.

The algorithm operates on two main assumptions: (1) Two elements of different types will produce different trees, and (2) The developer can hint at which child elements may be stable across renders with a key prop.

When comparing two trees, React first compares the root elements. If the root elements have different types (e.g., changing from <a> to <img>), React will tear down the old tree and build the new tree from scratch. When the types are the same, React keeps the same underlying DOM node and only updates the changed attributes.

For component elements of the same type, React updates the props of the underlying component instance, calls componentDidUpdate lifecycle methods, and then recurses on children. For lists of children, React uses keys to match children in the original tree with children in the subsequent tree, which is why providing stable, unique keys is crucial for performance.