What is hydration and what causes hydration mismatches?

Hydration is the process where React takes server-rendered HTML already in the DOM and attaches event listeners + React fiber state to it without re-rendering the whole tree from scratch.

Why mismatches happen: React compares the server HTML with what the client render would produce. If they differ, React throws a hydration error and falls back to a full client re-render (slow and potentially visually jarring).

Common mismatch causes:

• Date.now() or Math.random() used during render — different values server vs client.
• Accessing window, localStorage, or navigator during SSR — they don't exist server-side.
• Browser extensions injecting DOM nodes (ads, dark-mode extensions).
• Incorrect HTML nesting (e.g., <p> inside <p>) that browsers auto-correct differently.
• Locale-dependent formatting (dates, numbers) where server and client timezones differ.

// Fix: defer browser-only code
const [mounted, setMounted] = useState(false);
useEffect(() => setMounted(true), []);
if (!mounted) return null; // renders same as server