openmonetis/hooks/use-controlled-state.ts

import { useCallback, useEffect, useState } from "react";

/**
 * Hook for managing controlled/uncontrolled state pattern
 * Allows a component to work both in controlled and uncontrolled mode
 *
 * @param controlledValue - The controlled value (undefined for uncontrolled mode)
 * @param defaultValue - Default value for uncontrolled mode
 * @param onChange - Callback when value changes
 * @returns Tuple of [currentValue, setValue]
 *
 * @example
 * ```tsx
 * function MyComponent({ value, onChange }) {
 *   const [internalValue, setValue] = useControlledState(value, false, onChange);
 *   // Works both as controlled and uncontrolled
 * }
 * ```
 */
export function useControlledState<T>(
  controlledValue: T | undefined,
  defaultValue: T,
  onChange?: (value: T) => void
): [T, (value: T) => void] {
  const [internalValue, setInternalValue] = useState<T>(defaultValue);

  // Sync internal value when controlled value changes
  useEffect(() => {
    if (controlledValue !== undefined) {
      setInternalValue(controlledValue);
    }
  }, [controlledValue]);

  // Use controlled value if provided, otherwise use internal value
  const value = controlledValue !== undefined ? controlledValue : internalValue;

  const setValue = useCallback(
    (newValue: T) => {
      // Update internal state if uncontrolled
      if (controlledValue === undefined) {
        setInternalValue(newValue);
      }

      // Always call onChange if provided
      onChange?.(newValue);
    },
    [controlledValue, onChange]
  );

  return [value, setValue];
}