Hydration Errors: Causes & Fixes
Identify mismatches between server and client HTML and fix them with suppressHydrationWarning.
What Is a Hydration Error?
A hydration error occurs when React's server-rendered HTML doesn't match the virtual DOM React expects on the client. React logs a warning and re-renders the component from scratch, causing a flash.
Common Cause 1: Random Values
Using Math.random(), Date.now(), or crypto.randomUUID() during render produces different values on server and client.
// Bad — different on server vs client:
<div id={Math.random().toString()}>...</div>
// Fix — use useId() (stable across server/client):
import { useId } from 'react';
function Component() {
const id = useId();
return <div id={id}>...</div>;
}All lessons in this course
- How React SSR Works Under the Hood
- Hydration Errors: Causes & Fixes
- Selective Hydration & Streaming HTML
- Islands Architecture Pattern