Use Controllable State

1"use client";
2 
3import * as React from "react";
4 
5/**
6 * Hook for components that support both controlled and uncontrolled modes.
7 *
8 * @param controlledValue - The controlled value (if provided)
9 * @param defaultValue - The default value for uncontrolled mode
10 * @param onChange - Callback fired when value changes
11 * @returns A tuple of [currentValue, setValue]
12 *
13 * @example
14 * ```tsx
15 * interface Props {
16 *   value?: string;
17 *   defaultValue?: string;
18 *   onValueChange?: (value: string) => void;
19 * }
20 *
21 * function Input({ value, defaultValue = "", onValueChange }: Props) {
22 *   const [currentValue, setValue] = useControllableState(
23 *     value,
24 *     defaultValue,
25 *     onValueChange,
26 *   );
27 *
28 *   return (
29 *     <input
30 *       value={currentValue}
31 *       onChange={(e) => setValue(e.target.value)}
32 *     />
33 *   );
34 * }
35 * ```
36 */
37export function useControllableState<T>(
38  controlledValue: T | undefined,
39  defaultValue: T,
40  onChange?: (value: T) => void,
41): [T, (value: T) => void] {
42  const [internalValue, setInternalValue] = React.useState(defaultValue);
43  const isControlled = controlledValue !== undefined;
44  const value = isControlled ? controlledValue : internalValue;
45 
46  const setValue = React.useCallback(
47    (newValue: T) => {
48      if (!isControlled) {
49        setInternalValue(newValue);
50      }
51      onChange?.(newValue);
52    },
53    [isControlled, onChange],
54  );
55 
56  return [value, setValue];
57}