useIsClient

False on the server and during hydration, true on the client.

HooksEnvironment@gaudi/design-system/hooks/environment/use-is-clientView in Storybook Source

Defers browser-only output (theme toggles, local times, storage-backed values) without a hydration mismatch, and without the extra render of a mounted flag set in an effect.

Usage

import { useIsClient } from '@gaudi/design-system/hooks';
const isClient = useIsClient();return <time>{isClient ? date.toLocaleTimeString() : '—'}</time>;

Examples

Browser-only output

Storybook

API

1 return value

Accessibility

Render a same-size placeholder on the server so the layout does not jump and focus order does not change when the client value appears.

Notes

The ThemeSwitch uses it for its mounted state.

useDocumentTitleSet a document title and restore the previous owner on cleanup.useIsMobileTrue below the 768px phone breakpoint.useIsMountedA stable getter for whether this hook is currently mounted.useMediaQueryTrack a CSS media query, SSR-safe.useOnlineStatusWhether the browser reports a network connection.usePageVisibilityWhether the tab is visible, to pause work in the background.