useStorageState

useStorageState es un Hook de React que funciona como useState, pero conserva el valor del estado en el almacenamiento del navegador. El valor persiste cuando recargas la página y puedes compartirlo entre pestañas al usar localStorage.

Interfaz

function useStorageState<T>(
  key: string,
  options?: Object
): readonly [
  state: Serializable<T> | undefined,
  setState: (value: SetStateAction<Serializable<T> | undefined>) => void,
  refreshState: () => void,
];

Parámetros

• keyrequired · string
  

  La clave con la que guardas el valor en el almacenamiento.

• optionsObject
  

  Opciones para configurar el comportamiento del almacenamiento.

  • options.storageStorage · localStorage
    

    El tipo de almacenamiento (localStorage o sessionStorage). El valor predeterminado es localStorage.

  • options.defaultValueT
    

    El valor inicial si no hay ningún valor guardado.

  • options.serializerFunction
    

    Una función para serializar el valor del estado como una cadena.

  • options.deserializerFunction
    

    Una función para deserializar el valor del estado a partir de una cadena.

Valor de retorno

• readonly [state: Serializable<T> | undefined, setState: (value: SetStateAction<Serializable<T> | undefined>) => void, refreshState: () => void]
  

  Una tupla:

  • stateSerializable<T> | undefined
    

    El valor actual del estado obtenido del almacenamiento.

  • setState(value: SetStateAction<Serializable<T> | undefined>) => void
    

    Una función para actualizar y guardar el estado de forma persistente.

  • refreshState() => void
    

    Una función para actualizar el estado a partir del almacenamiento.

Ejemplo

// Contador con estado persistente
import { useStorageState } from 'react-simplikit';

function Counter() {
  const [count, setCount] = useStorageState<number>('counter', {
    defaultValue: 0,
  });

  return (
    <button onClick={() => setCount(prev => prev + 1)}>Conteo: {count}</button>
  );
}