useControlledState

useControlledState は、制御された状態と非制御の状態の両方を扱える React フックです。 状態を value に渡すと制御された状態になり、defaultValue に渡すと非制御の状態になります。 value と defaultValue の両方を渡した場合は、value が優先されます。

インターフェース

function useControlledState<T>(props: Object): [T, Dispatch<SetStateAction<T>>];

パラメータ

• propsrequired · Object
  
  • props.valueT
    

    状態の値。

  • props.defaultValueT
    

    状態のデフォルト値。

  • props.onChange(value: T) => void
    

    状態が変わったときに呼び出されるコールバック関数。

  • props.equalityFn(prev: T, next: T) => boolean
    

    前回の値と次の値を比較する関数。

戻り値

• [T, Dispatch<SetStateAction<T>>]
  

  状態と、その値を設定する関数。

使用例

type ToggleProps = {
  value?: boolean;
  defaultValue?: boolean;
  onChange?: (value: boolean) => void;
};

function Toggle({ value, defaultValue, onChange }: ToggleProps) {
  const [on, setOn] = useControlledState({
    value,
    defaultValue: defaultValue ?? false,
    onChange,
  });

  return (
    <button onClick={() => setOn(prev => !prev)}>{on ? 'ON' : 'OFF'}</button>
  );
}