Reactopia | Reusable React developer tools

useMounted

Detect client mount to avoid hydration mismatches.

LivehookReact, WebUpdated 2026-10-07MIT License Source on GitHub Report Issue

Dependencies:npm install react

Introduction

Returns true after the component has mounted. Helps avoid hydration mismatches when client-only APIs (charts, maps, random IDs) must not run on the server.

Platform: React 18+ (web). Dependencies: react only.

Hook

import { useEffect, useState } from "react";

export function useMounted(): boolean {
  const [mounted, setMounted] = useState(false);
  useEffect(() => setMounted(true), []);
  return mounted;
}

Example

tsx

const mounted = useMounted();
if (!mounted) return null;
return <ClientOnlyChart data={data} />;

Footer

Prefer rendering a static placeholder on the server instead of null when SEO or layout stability matters.