useIsHydrated

Once `true`, no hydration error can occur.

Prevent hydration mismatches by conditionally rendering content that depends on browser APIs.

Installation

npm install @1hook/use-is-hydrated

import { useIsHydrated } from '@1hook/use-is-hydrated'

Check if the component is hydrated:

function MyComponent() {
  const isHydrated = useIsHydrated()

  if (!isHydrated) return null

  return <div>{Date.now()}</div>
}

useInvariantContext

useContext that throws if the provider is not found.

useIsOnline

Track the online state of the browser.