Controllable State Hook

1// Thanks @radix-ui
2 
3import * as React from "react"
4 
5// use-layout-effect.tsx
6// https://github.com/radix-ui/primitives/blob/main/packages/react/use-layout-effect/src/use-layout-effect.tsx
7 
8/**
9 * On the server, React emits a warning when calling `useLayoutEffect`.
10 * This is because neither `useLayoutEffect` nor `useEffect` run on the server.
11 * We use this safe version which suppresses the warning by replacing it with a noop on the server.
12 *
13 * See: https://reactjs.org/docs/hooks-reference.html#uselayouteffect
14 */
15const useLayoutEffect = globalThis?.document ? React.useLayoutEffect : () => {}
16 
17// use-controllable-state.tsx
18// https://github.com/radix-ui/primitives/blob/main/packages/react/use-controllable-state/src/use-controllable-state.tsx
19 
20// Prevent bundlers from trying to optimize the import
21const useInsertionEffect: typeof useLayoutEffect =
22  (React as never)[" useInsertionEffect ".trim().toString()] || useLayoutEffect
23 
24type ChangeHandler<T> = (state: T) => void
25type SetStateFn<T> = React.Dispatch<React.SetStateAction<T>>
26 
27interface UseControllableStateParams<T> {
28  prop?: T | undefined
29  defaultProp: T
30  onChange?: ChangeHandler<T>
31  caller?: string
32}
33 
34export function useControllableState<T>({
35  prop,
36  defaultProp,
37  onChange = () => {},
38  caller,
39}: UseControllableStateParams<T>): [T, SetStateFn<T>] {
40  const [uncontrolledProp, setUncontrolledProp, onChangeRef] =
41    useUncontrolledState({
42      defaultProp,
43      onChange,
44    })
45  const isControlled = prop !== undefined
46  const value = isControlled ? prop : uncontrolledProp
47 
48  // OK to disable conditionally calling hooks here because they will always run
49  // consistently in the same environment. Bundlers should be able to remove the
50  // code block entirely in production.
51  /* eslint-disable react-hooks/rules-of-hooks */
52  if (process.env.NODE_ENV !== "production") {
53    const isControlledRef = React.useRef(prop !== undefined)
54    React.useEffect(() => {
55      const wasControlled = isControlledRef.current
56      if (wasControlled !== isControlled) {
57        const from = wasControlled ? "controlled" : "uncontrolled"
58        const to = isControlled ? "controlled" : "uncontrolled"
59        console.warn(
60          `${caller} is changing from ${from} to ${to}. Components should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled value for the lifetime of the component.`
61        )
62      }
63      isControlledRef.current = isControlled
64// … truncated