What is Hydration in React?
Learn what hydration in React means, how it makes server-rendered HTML interactive, hydration mismatches, hydrateRoot, and streaming hydration with examples.
Expected Interview Answer
Hydration is the process where React takes server-rendered static HTML that is already in the DOM and attaches its event listeners, state, and reconciliation logic to it, turning the inert markup into a fully interactive React application without re-creating the DOM.
During SSR the server produces HTML the browser paints immediately, but that markup has no event handlers and cannot respond to clicks. On the client, React walks the same component tree, matches its virtual DOM against the existing HTML, and wires up interactivity in place — this is hydration. The server and client output must match; a mismatch triggers hydration errors and React may discard and re-render the affected subtree. Modern React supports selective and streaming hydration so pages become interactive progressively rather than all at once.
- Reuses server HTML instead of rebuilding the DOM
- Combines fast first paint with full interactivity
- Enables progressive and selective hydration
- Preserves SEO-friendly server markup
- Reduces time to interactive when streamed
AI Mentor Explanation
Hydration is like the groundstaff setting up a fully painted, ready-looking pitch and stumps before anyone can play. The scene looks complete, but the match only becomes live once the umpires arrive and connect the rules, signals, and scoring; hydration is React arriving to make the ready-looking field actually respond to play.
Step-by-Step Explanation
Step 1
Server renders HTML
SSR produces complete markup the browser paints immediately, but it has no attached behavior.
Step 2
Bundle loads on client
The same React component code downloads and begins executing in the browser.
Step 3
React matches the tree
React builds its virtual DOM and reconciles it against the existing server-rendered DOM nodes.
Step 4
Attach interactivity
Event listeners and state are wired onto the existing nodes instead of recreating them.
Step 5
Handle mismatches
If server and client markup differ, React logs a hydration error and may re-render the subtree.
What Interviewer Expects
- Precise definition tying hydration to SSR output
- Understanding that hydrated HTML reuses existing DOM nodes
- Awareness of hydration mismatches and their causes
- Knowledge of selective or streaming hydration
- Ability to explain time to interactive
Common Mistakes
- Saying hydration recreates the whole DOM from scratch
- Believing server HTML is interactive before hydration
- Ignoring that server and client output must match
- Confusing hydration with client-side rendering
- Overlooking hydration cost on large pages
Best Answer (HR Friendly)
“Hydration is how React takes the ready-made HTML a server sent and makes it interactive in the browser, attaching the code that responds to clicks and input without rebuilding the page. It lets users see content fast and then have it come alive as the JavaScript loads.”
Code Example
import { hydrateRoot } from 'react-dom/client'
import App from './App'
// The container already holds server-rendered HTML.
const container = document.getElementById('root')
hydrateRoot(container, <App />)'use client'
import { useEffect, useState } from 'react'
export default function LiveClock() {
// Render stable HTML on the server, update only after mount
const [time, setTime] = useState(null)
useEffect(() => {
setTime(new Date().toLocaleTimeString())
}, [])
return <span>{time ?? 'Loading time…'}</span>
}Follow-up Questions
- What causes a hydration mismatch and how do you fix it?
- How does streaming SSR change the hydration timeline?
- What is selective hydration in concurrent React?
- Why is time to interactive different from first paint?
- How do Server Components reduce hydration cost?
MCQ Practice
1. What does hydration primarily attach to server-rendered HTML?
Hydration attaches React's event handlers, state, and reconciliation to the existing DOM so the static markup becomes interactive.
2. Which API hydrates existing server HTML in React 18+?
hydrateRoot attaches React to server-rendered markup already in the container, whereas createRoot builds fresh DOM.
3. What typically causes a hydration mismatch warning?
If the client render differs from the server HTML — e.g., time or random values — React detects a mismatch and may discard the subtree.
Flash Cards
What is hydration? — Attaching React's listeners and state to existing server-rendered DOM to make it interactive.
Which React API hydrates? — hydrateRoot from react-dom/client.
What is a hydration mismatch? — When client render differs from server HTML, causing React to warn and possibly re-render.
Why hydrate instead of re-render? — It reuses server HTML for fast paint plus interactivity, avoiding a full DOM rebuild.
What is selective hydration? — React hydrating parts of the tree independently and prioritizing user-interacted regions first.