All hooks / Page, device, and user

useHydrated

77 B minified and brotliedSourceMarkdown✓ Works in all modern browsers

false on the server and during hydration, true once the component is running in the browser.

On a client-side mount after the page has hydrated, it is true from the first render, so there is no flash. This replaces the useState(false) + useEffect(() => setMounted(true)) pattern, which renders false first on every mount.

Import

import { useHydrated } from '@vincent.ri/react-tils'
// or only this hook
import { useHydrated } from '@vincent.ri/react-tils/useHydrated'

Usage

const hydrated = useHydrated()
return <time>{hydrated ? date.toLocaleString() : date.toISOString()}</time>

Live demo

When to use it

Rendering something that only makes sense in the browser, e.g. a locale-formatted date or time, a client-only widget, or a "copy to clipboard" button that needs browser APIs.

When not to

You need a specific browser value (viewport, storage, network); use the hook for that value, which also renders the right thing on the server. Don't use it to hide hydration mismatches you could fix.

API

function useHydrated(): boolean

Coming from another library?

Other libraries call this useIsClient, useMounted.