useMounted

A hook that returns whether the component is currently mounted, updating on mount and unmount.

Installation

npx shadcn@latest add @craftdotui/use-mounted

Usage

import { useMounted } from "@/hooks/use-mounted";

function ClientComponent() {
  const mounted = useMounted();

  if (!mounted) {
    return null;
  }

  return (
    <div>
      <p>Component is mounted</p>
    </div>
  );
}

API Reference

useMounted

A hook that returns whether the component is currently mounted.

Use Cases

  • Preventing SSR/CSR mismatches
  • Conditional rendering based on mount state
  • Cleanup logic that depends on mount state