What is hydration and what is a hydration mismatch?
Quick answer
Hydration is React attaching event listeners to server-rendered HTML to make it interactive. A mismatch is when the client render differs from the server HTML.
In detail
With SSR/SSG, the server sends static HTML; React then 'hydrates' it by building its tree and wiring up events without recreating the DOM. If what the client renders doesn't match the server output — e.g. using Date.now(), window, or random values during render — React warns about a mismatch and may discard the HTML. Fixes: render such values in an effect, or use useId for stable ids.
Why interviewers ask this: A modern SSR question that catches gaps in Next.js knowledge.
This is 1 of 118+ questions in the React Interview Kit
Get every question with detailed answers, follow-ups and real code — plus coding challenges and a last-minute revision sheet. One-time payment, instant access.
⚡ Get the React Interview Kit → ₹399