What is hydration in React and why does it matter

What Is Hydration?

Hydration is the process where React attaches event listeners to server-rendered HTML and makes it interactive. Without hydration, the page is static; with it, buttons, forms, and dynamic content come alive.

The Process

When using Server-Side Rendering (SSR), the server sends a fully formed HTML document. React then walks the DOM tree, compares it to the virtual DOM, and wires up JavaScript behavior. This avoids a blank page during load and improves SEO.

Hydration Mismatches

A mismatch occurs when the server HTML differs from what the client expects. Common causes include using Date.now(), Math.random(), or browser-only APIs during render:

// Risky: timestamp differs between server and client
const now = Date.now();

Fix mismatches by using useEffect for client-only values or suppressing the offending output during SSR.

Hydration matters for performance and correctness. If you are exploring modern rendering models, also read what are React server components and how do they work. For production deployment concerns, see how to deploy a React app to production.