What causes React hydration mismatches, how do you diagnose them, and how does React 18 selective hydration change the recovery strategy?

Imagine you draw a picture with crayons, then your friend traces it with a marker. If your friend's lines don't match yours exactly, the picture looks messy. React hydration is like that: the server draws the page, and React on the browser tries to match it. If they don't match, React has to redraw, which is slow. Selective hydration lets React fix only the messy parts without redrawing the whole page.