useSet

Un Hook de React que gestiona un Set como estado. Proporciona una gestión eficiente del estado y funciones de acción estables.

Interfaz

function useSet<T>(initialState: SetOrValues<T> = new Set()): UseSetReturn<T>;

Parámetros

• initialStateSetOrValues<T>
  

  Estado inicial del Set (objeto Set o arreglo de valores).

Valor de retorno

• UseSetReturn<T>
  

  Una tupla que contiene el estado del Set y acciones para modificarlo.

  • [0]Omit<Set<T>, 'add' | 'clear' | 'delete'>
    

    El estado actual del Set con los métodos de mutación ocultos.

  • [1].add(value: T) => void
    

    Añade un valor al conjunto.

  • [1].remove(value: T) => void
    

    Elimina un valor del conjunto.

  • [1].toggle(value: T) => void
    

    Añade el valor si no está presente y lo elimina si está presente.

  • [1].setAll(values: Set<T> | T[]) => void
    

    Reemplaza todos los valores del conjunto.

  • [1].reset() => void
    

    Restablece el conjunto a su estado inicial.

Ejemplo

import { useSet } from 'react-simplikit';

function TagSelector() {
  const [selectedTags, { add, remove, toggle }] = useSet<string>(['react']);

  return (
    <div>
      {['react', 'vue', 'svelte'].map(tag => (
        <button key={tag} onClick={() => toggle(tag)}>
          {selectedTags.has(tag) ? '✓' : ''} {tag}
        </button>
      ))}
    </div>
  );
}