UNPKG

@kentcdodds/tmp-remix-utils

Version:

This package contains simple utility functions to use with [Remix.run](https://remix.run).

28 lines (27 loc) 828 B
import { useEffect, useState } from "react"; let hydrating = true; /** * Return a boolean indicating if the JS has been hydrated already. * When doing Server-Side Rendering, the result will always be false. * When doing Client-Side Rendering, the result will always be false on the * first render and true from then on. Even if a new component renders it will * always start with true. * * Example: Disable a button that needs JS to work. * ```tsx * let hydrated = useHydrated(); * return ( * <button type="button" disabled={!hydrated} onClick={doSomethingCustom}> * Click me * </button> * ); * ``` */ export function useHydrated() { let [hydrated, setHydrated] = useState(() => !hydrating); useEffect(function hydrate() { hydrating = false; setHydrated(true); }, []); return hydrated; }