useControllableState

A native <input> works two ways: pass value + onChange and you own its state, or pass defaultValue and it owns its own. useControllableState gives a custom component that same choice from a single hook - the body just reads one value and calls one setValue, and never has to branch on which mode it's in.

@itsnas color-picker.tsx

codecolor-picker.tsx

'use client'
 
interface ColorPickerProps {
  value?: string
  defaultValue?: string
  onChange?: (value: string) => void
}
 
function ColorPicker({
  value,
  defaultValue = '#000000',
  onChange,
}: ColorPickerProps) {
  // @src/code/controllable-state
  const [color, setColor] = useControllableState({
    value,
    defaultValue,
    onChange,
  })
 
  return (
    <input
      type="color"
      value={color}
      onChange={e => setColor(e.target.value)}
    />
  )
}
 
// Uncontrolled - ColorPicker keeps its own state, parent just
// hears about changes:
//   <ColorPicker defaultValue="#0ea5e9" onChange={save} />
//
// Controlled - parent owns the value:
//   <ColorPicker value={color} onChange={setColor} />

main

Nas (@itsnas)

'use client'
 
interface Params<T> {
  // the controlled value; `undefined` means "uncontrolled"
  value: T | undefined
  // starting value, used only in uncontrolled mode
  defaultValue: T
  onChange?: (value: T) => void
}
 
export function useControllableState<T>({
  value,
  defaultValue,
  onChange,
}: Params<T>): [T, (next: T) => void] {
  const [internal, setInternal] = useState(defaultValue)
  const isControlled = value !== undefined
  const current = isControlled ? value : internal
 
  // `onChange` may be a new function every render, hold the latest
  // in a ref so `setValue` can stay referentially stable.
  const onChangeRef = useRef(onChange)
  useInsertionEffect(() => {
    onChangeRef.current = onChange
  })
 
  const setValue = useCallback(
    (next: T) => {
      if (!isControlled) setInternal(next)
      onChangeRef.current?.(next)
    },
    [isControlled],
  )
 
  return [current, setValue]
}

main

Nas (@itsnas)