useControlledState

useControlledState es un Hook de React que te permite gestionar tanto estados controlados como no controlados. Si pasas el estado a value, será un estado controlado, y si lo pasas a defaultValue, será un estado no controlado. Si pasas tanto value como defaultValue, value tendrá prioridad.

Interfaz

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

Parámetros

• propsrequired · Object
  
  • props.valueT
    

    El valor del estado.

  • props.defaultValueT
    

    El valor predeterminado del estado.

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

    El callback que se ejecuta cuando cambia el estado.

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

    La función que compara el valor anterior con el siguiente.

Valor de retorno

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

  El estado y la función para actualizarlo.

Ejemplo

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 ? 'ACTIVADO' : 'DESACTIVADO'}
    </button>
  );
}