useSet

Set state with add, remove, and reset helpers.

Import

import { useSet } from '@kamod-ch/hooks'

Live demo

Basic demo

Set state with add, remove, and reset helpers.

Tags: preact

import { useSet } from '@kamod-ch/hooks'

export default function UseSetDemo() {
  const [tags, actions] = useSet(['preact'])

  return (
    <div>
      <p><strong>Tags:</strong> {[...tags].join(', ') || 'none'}</p>
      <div class="demo-actions">
        <button type="button" onClick={() => actions.add('hooks')}>Add hooks</button>
        <button type="button" onClick={() => actions.add('docs')}>Add docs</button>
        <button type="button" onClick={() => actions.remove('preact')}>Remove preact</button>
        <button type="button" onClick={actions.reset}>Reset</button>
      </div>
    </div>
  )
}

API

TypeScript signature

declare function useSet<K>(initialValue?: Iterable<K>): readonly [Set<K>, {
    readonly add: (this: unknown, key: K) => void;
    readonly remove: (this: unknown, key: K) => void;
    readonly reset: (this: unknown) => void;
}];
export default useSet;
/

SSR considerations

This hook is safe to import during SSR. If your effect body touches the DOM, keep that work inside the effect callback.

Browser compatibility

Works in any modern browser supported by Preact.