# useHydrated

`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

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

## Usage

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

## 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

```ts
function useHydrated(): boolean
```

## Browser support

Works in all modern browsers.

## Coming from another library?

Other libraries call this `useIsClient`, `useMounted`.

---

77 B minified and brotlied
Source: https://github.com/vincentri/react-tils/blob/main/src/useHydrated.ts
Docs page: https://vincentri.github.io/react-tils/hooks/useHydrated/
Previous: [useGeolocation](https://vincentri.github.io/react-tils/hooks/useGeolocation.md)
Next: [useNow](https://vincentri.github.io/react-tils/hooks/useNow.md)