What is hydration in React?

import { useState, useEffect } from "react";

// ❌ rendering Date.now() directly differs between server and client → mismatch
// ✅ render a stable placeholder on the server, fill in after mount
export default function Clock() {
  const [time, setTime] = useState(null);     // same on server & first client render
  useEffect(() => {
    setTime(new Date().toLocaleTimeString()); // browser-only, after hydration
  }, []);
  return (
    <p style={{ fontFamily: "system-ui" }}>
      Time: {time ?? "loading…"}
    </p>
  );
}