use-is-hydrated

1import { useSyncExternalStore } from 'react'
2 
3function subscribe() {
4  return () => {}
5}
6 
7/**
8 * Return a boolean indicating if the JS has been hydrated already.
9 * When doing Server-Side Rendering, the result will always be false.
10 * When doing Client-Side Rendering, the result will always be false on the
11 * first render and true from then on. Even if a new component renders it will
12 * always start with true.
13 *
14 * Example: Disable a button that needs JS to work.
15 * ```tsx
16 * const isHydrated = useIsHydrated();
17 * return (
18 *   <button type="button" disabled={!isHydrated} onClick={doSomethingCustom}>
19 *     Click me
20 *   </button>
21 * );
22 * ```
23 */
24export function useIsHydrated() {
25  return useSyncExternalStore(
26    subscribe,
27    () => true,
28    () => false,
29  )
30}