Walk me through what happens when React re-renders a component. How does reconciliation decide what actually hits the DOM?

When state changes, React re-runs the component function to produce a new element tree, then diffs it against the previous tree. It compares node types and keys position by position: the same type means React updates props in place, a different type means it unmounts the old subtree and mounts a new one. Only the resulting minimal set of changes is committed to the real DOM.

So when state changes, React calls the component function again, and that gives it a new tree of elements. That is the render phase, and nothing has touched the DOM yet. Then it walks the new tree against the old one. At each position it looks at the element type first. If it is the same type, say a div stays a div, it keeps the existing DOM node and the existing state and just patches whatever props changed. If the type is different, it throws the whole subtree away and builds a fresh one, which means any state inside is gone. For lists it uses keys instead of raw position, so items can move without being rebuilt. Then all the collected changes get applied in one commit pass. The reason I care about this in practice is that I once debugged a form that reset itself on every keystroke, and it was because the parent rendered it inside a conditional that swapped the wrapper element type. Once you know the diff rules that is a five minute fix instead of an afternoon.