useHydrated

Overview

useHydrated() returns false on the server and while the page hydrates, and true once hydration has finished. In a page rendered only in the browser it returns true from the first render.

Render the server's version while it is false and the browser's version after. React hydrates against the first, then renders again with the second, so nothing mismatches. This library uses it for what only the browser knows: a Portal and what refers to it, and which day is today in a calendar.

Basic usage

The time zone below is the browser's. The server renders the placeholder.

import { useHydrated } from '@chassis-ui/react'

export const Example = () => {
  const hydrated = useHydrated()
  return (
    <p>
      {hydrated
        ? `Your time zone: ${Intl.DateTimeFormat().resolvedOptions().timeZone}`
        : 'Finding your time zone…'}
    </p>
  )
}

API

useHydrated

function useHydrated(): boolean