What is hydration in React?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

// client.js
import { hydrateRoot } from 'react-dom/client';
import App from './App';

hydrateRoot(document.getElementById('root'), <App />);

// Markup that does not match produces hydration errors:
// server: <p>2025-05-12 12:00</p>
// client: <p>2025-05-12 12:01</p>   <- different string, React cannot reconcile

// Fix: render time-dependent values after mount
function Clock() {
  const [now, setNow] = useState(null);
  useEffect(() => setNow(new Date().toISOString()), []);
  return <p>{now ?? 'loading'}</p>;
}