useSet

Set を状態として管理する React フックです。 効率的な状態管理と、参照が安定した操作関数を提供します。

インターフェース

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

パラメータ

• initialStateSetOrValues<T>
  

  Set の初期状態（Set オブジェクトまたは値の配列）。

戻り値

• UseSetReturn<T>
  

  Set の状態と、それを操作する関数を含むタプル。

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

    変更用のメソッドを非公開にした、現在の Set の状態。

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

    Set に値を追加します。

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

    Set から値を削除します。

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

    値が存在しなければ追加し、存在すれば削除します。

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

    Set 内のすべての値を置き換えます。

  • [1].reset() => void
    

    Set を初期状態に戻します。

使用例

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>
  );
}