useHydrated

A hook that returns whether the component has hydrated on the client to avoid hydration mismatches.

Installation

npx shadcn@latest add @craftdotui/use-hydrated

Usage

import { useHydrated } from "@/hooks/use-hydrated";

function ClientOnlyComponent() {
  const isHydrated = useHydrated();

  if (!isHydrated) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <p>This content is only rendered on the client</p>
      <p>Current time: {new Date().toLocaleTimeString()}</p>
    </div>
  );
}

API Reference

useHydrated

A hook that returns whether the component has hydrated on the client to avoid hydration mismatches.

Use Cases

  • Preventing hydration mismatches when using client-only APIs
  • Conditionally rendering content that depends on browser APIs
  • Avoiding SSR/CSR inconsistencies