Repair a component that renders `new Date()` differently on server and client.

• Use one server-provided instant.
• Keep initial markup deterministic.
• Do not use suppressHydrationWarning as the fix.
• Expose an ISO datetime attribute.

The first render uses a stable formatter shared by server and client. An effect marks hydration complete before browser-local formatting.

export function EventTime({ iso }: { iso: string }) {
  const [hydrated, setHydrated] = useState(false);
  useEffect(() => setHydrated(true), []);
  const timestamp = Date.parse(iso);
  if (!Number.isFinite(timestamp)) return <span>Time unavailable</span>;
  const instant = new Date(timestamp);
  const label = hydrated
    ? new Intl.DateTimeFormat(undefined, { dateStyle: "medium", timeStyle: "short" }).format(instant)
    : `${instant.toISOString().slice(0, 16).replace("T", " ")} UTC`;
  return <time dateTime={iso}>{label}</time>;
}

The deterministic initial label avoids mismatch; local enhancement causes one intentional client update.

• Invalid ISO input.
• Different server time zone.
• JavaScript disabled.
• Locale changes.

• Assert no hydration warning.
• Render under different process time zones.
• Check the time element.

• Calling new Date() independently on each side.
• Suppressing the warning.
• Changing the represented instant.
• Rendering nothing until hydration without need.