Hydration Mismatch

window/Date.now()/Math.random() in server component render path

warningReliabilityhydration-mismatch

Why this matters

Server and client render different values for Date.now(), Math.random(), and window references. React's hydration fails with a mismatch warning and re-renders the entire tree.

✗ Bad

export default function Banner() {
  // Different value on server vs client
  const id = Math.random().toString(36).slice(2);
  const now = Date.now();

  return <div id={id}>Page loaded at {now}</div>;
}

✓ Good

"use client";

import { useId, useState, useEffect } from "react";

export default function Banner() {
  const id = useId();
  const [now, setNow] = useState<number>();

  useEffect(() => {
    setNow(Date.now());
  }, []);

  return <div id={id}>
    {now ? `Page loaded at ${now}` : "Loading..."}
  </div>;
}

How to fix

Use useId() for stable IDs. Move time-dependent or random values into useEffect or useState. Access window only inside useEffect.

All rules