@charlietango/use-client-hydrated

useClientHydrated

Check if the client has been hydrated. This hook only informs you of the current hydration state, and doesn't trigger a new render once the client becomes hydrated. To check that, you'd combine it with a useEffect to trigger a new render.

Checkout the Storybook demo.

Installation

yarn add @charlietango/use-client-hydrated

API

const output = useClientHydrated()

Example

import React, { useEffect, useState } from 'react'
import useClientHydrated from '@charlietango/use-client-hydrated'

const Component = () => {
  const hydrated = useClientHydrated()

  // Set the initial ready state based on hydrated. Will be `false` first time the component is rendered, but true after hydration.
  const [ready, setReady] = useState(hydrated)

  useEffect(() => {
    // We have been hydrated correctly now
    setReady(true)
  }, [])

  return <div>{ready ? 'Hydrated' : 'Hydrating'}</div>
}

export default Component