useHydrated

False on the server and the first client render, true after hydration.

SignatureCopy link

Returns false on the server and on the first client render, and true after hydration. Render a neutral value until it flips so the server HTML and the first client paint agree when rendering values that depend on the reader's machine (clock, timezone, platform). See Server rendering for which components use it.

function useHydrated(): boolean;

UsageCopy link

import { useHydrated } from "@solarius/onset";

function LocalTime({ iso }: { iso: string }) {
  const hydrated = useHydrated();
  // The server has no idea what timezone the reader is in.
  if (!hydrated) return <time dateTime={iso}>{iso}</time>;
  return <time dateTime={iso}>{new Date(iso).toLocaleString()}</time>;
}