@charlietango/use-client-hydrated
v1.10.0
Published
Check if the client has been hydrated
Downloads
20,383
Readme
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