What is hydration in React?
Why Interviewers Ask This
Candidates at the intermediate level are expected to not only know this concept but explain the trade-offs involved. Interviewers use this question to see if you can reason about design decisions, not just recall facts.
Answer
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.
Common Mistake
Rushing to answer is a common mistake. Take two seconds to structure your response: definition → example → trade-off. This structure makes complex React.js answers easy to follow.