useHydrated

Returns false on the server and during the first client render, then true once the component has hydrated

useHydrated() → false

Client-only value: — (waiting for hydration)

On the server and the very first client render this is false; it flips to true right after hydration — with no mismatch warning

Because it is built on useSyncExternalStore, the first client render uses the server snapshot (false), so it matches the server markup and never triggers a hydration mismatch — then it updates to true right after commit. Use it to gate browser-only UI that would otherwise differ between server and client


import { useHydrated } from 'react-stateful-hooks';
 
function Clock() {
  const hydrated = useHydrated();
 
  // Renders the same thing on both sides first, then the client-only value
  return <span>{hydrated ? new Date().toLocaleTimeString() : null}</span>;
}

Signature


const hydrated = useHydrated(): boolean;

When to use it

Rendering values that only exist in the browser (Date, window, localStorage)
Showing a placeholder during SSR and swapping in client-only content after mount
Avoiding the “text content did not match” warning without useEffect + useState boilerplate