kitzo

React utilities library

useMounted

Detect when a React component has fully mounted on the client-side. Extremely useful for avoiding hydration mismatches when rendering browser-only features.

Usage

Mounted.tsx

const isMounted = useMounted();

Example

Interactive Mount Playground

Trigger a remount to observe the client-side mounting transition.

Real Component Instance

Hydrating / Server Rendering...

useMounted() => false

⏳ Preparing client-side activation...

Life Cycle Timeline

SSR / HTML Output

`useMounted()` returns false. Safe fallback markup is generated on the server.

Hydration Trigger

React binds events. `useEffect` runs. `useMounted` transitions to true on the next tick.

Client-Safe Hydration Complete

State synced, dynamic browser-only features are now fully functional and visible.

ClientOnlyWrapper.tsx

import { useMounted } from 'kitzo';
            
function ClientOnly({ children }: { children: React.ReactNode }) {
  const isMounted = useMounted();

  if (!isMounted) {
    // Render an empty state or a server-safe fallback skeleton during SSR/hydration
    return <div className="h-20 animate-pulse bg-neutral-100 dark:bg-neutral-800 rounded-lg" />;
  }

  // Safe to render browser-only APIs or components after mounting
  return <>{children}</>;
}

API

This hook does not accept any parameters.

Return Value

Type	Description
`boolean`	Returns `true` once the component has mounted on the client-side; otherwise `false` during server-side rendering or initial hydration.

Returns a simple boolean indicating the component's mount status.

Behavior

Guarantees a hydration-safe fallback during server-side rendering (SSR) and static generation (SSG).
Returns false on the server and initial client render, then transitions to true immediately after hydration.
Prevents React hydration mismatches caused by browser-only global APIs (e.g. window, document, or localStorage).
Triggers a single re-render upon mount to update layout and display client-only features.