useSet

A state hook for managing a Javascript Set object.

Batch Manager

Unique Selection Logic

🎯

Task Name0 Selected

Draft Proposal

Planning

Technical Specs

Planning

UI Mockups

Design

Color Palette

Design

Core Hooks

Engineering

Demo Pages

Engineering

Usage

import { useSet } from 'usehooks-ts'
 
export default function App() {
  const [set, actions] = useSet([1, 2, 3])
 
  return (
    <div>
      <p>Has 1: {set.has(1) ? 'Yes' : 'No'}</p>
      <button onClick={() => actions.add(4)}>Add 4</button>
      <button onClick={() => actions.toggle(2)}>Toggle 2</button>
      <button onClick={actions.clear}>Clear All</button>
    </div>
  )
}

API

const [set, actions] = useSet(initialValues?)

Actions

Name	Type	Description
`add`	`(value) => void`	Adds a value to the set
`remove`	`(value) => void`	Removes a value from the set
`toggle`	`(value) => void`	Adds if missing, removes if present
`reset`	`() => void`	Reverts to initial values
`clear`	`() => void`	Removes all values

Hook

import { useCallback, useState } from 'react'
 
export type SetActions<T> = {
  add: (value: T) => void
  remove: (value: T) => void
  toggle: (value: T) => void
  reset: () => void
  clear: () => void
}
 
export function useSet<T>(initialValues?: Iterable<T>): [Set<T>, SetActions<T>] {
  const [set, setSet] = useState(() => new Set(initialValues))
 
  const add = useCallback((value: T) => {
    setSet((prev) => {
      const copy = new Set(prev)
      copy.add(value)
      return copy
    })
  }, [])
 
  const remove = useCallback((value: T) => {
    setSet((prev) => {
      const copy = new Set(prev)
      copy.delete(value)
      return copy
    })
  }, [])
 
  const toggle = useCallback((value: T) => {
    setSet((prev) => {
      const copy = new Set(prev)
      if (copy.has(value)) {
        copy.delete(value)
      } else {
        copy.add(value)
      }
      return copy
    })
  }, [])
 
  const reset = useCallback(() => {
    setSet(new Set(initialValues))
  }, [initialValues])
 
  const clear = useCallback(() => {
    setSet(new Set())
  }, [])
 
  const actions: SetActions<T> = {
    add,
    remove,
    toggle,
    reset,
    clear,
  }
 
  return [set, actions]
}