What is hydration in React?

Hydration is the process of attaching React event handlers to the server-rendered HTML on the client, making the static HTML interactive. After SSR sends the HTML, the browser displays it immediately (content is visible without waiting for JavaScript). Then React downloads, parses, and runs the JavaScript bundle. React "hydrates" by traversing the existing DOM, comparing it to the virtual DOM, and attaching event handlers — without replacing the DOM (which would cause a flash). Hydration must match: the client render must produce the exact same output as the server — if any component renders differently (due to Date.now(), Math.random(), window checks), React logs a hydration mismatch warning and falls back to full client-side rendering for that subtree. Selective hydration (React 18): components inside Suspense boundaries hydrate independently — React can prioritize hydrating the parts the user interacts with first. Progressive hydration: defer hydration of below-the-fold components to reduce Time to Interactive. Islands architecture: frameworks like Astro hydrate only specific "islands" of interactivity, leaving the rest as static HTML.