useSetState

Manages a Set data structure as React state with add, delete, and clear helpers.

About

Manage the state of a Set in React. Exposes add, delete and clear methods along with the current set to easily manipulate values in a set.

Examples

Basic example with numbers

import { useSetState } from "rooks";

export default function App() {
  const [numberSet, setControls] = useSetState(new Set([1, 2, 3]));

  return (
    <div>
      <div>Current set: {Array.from(numberSet).join(", ")}</div>
      <div>Set size: {numberSet.size}</div>
      <br />
      <button onClick={() => setControls.add(4)}>Add 4</button>
      <button onClick={() => setControls.add(5)}>Add 5</button>
      <button onClick={() => setControls.delete(1)}>Delete 1</button>
      <button onClick={() => setControls.clear()}>Clear All</button>
    </div>
  );
}

Working with strings and membership checking

import { useSetState } from "rooks";

export default function App() {
  const [fruits, fruitControls] = useSetState(new Set(["apple", "banana"]));

  const addRandomFruit = () => {
    const randomFruits = ["orange", "grape", "mango", "pear"];
    const randomFruit =
      randomFruits[Math.floor(Math.random() * randomFruits.length)];
    fruitControls.add(randomFruit);
  };

  return (
    <div>
      <div>Fruits: {Array.from(fruits).join(", ")}</div>
      <div>Has apple: {fruits.has("apple") ? "Yes" : "No"}</div>
      <div>Has orange: {fruits.has("orange") ? "Yes" : "No"}</div>
      <br />
      <button onClick={addRandomFruit}>Add Random Fruit</button>
      <button onClick={() => fruitControls.delete("apple")}>
        Remove Apple
      </button>
      <button onClick={() => fruitControls.clear()}>Clear All</button>
    </div>
  );
}

Managing selected items

import { useSetState } from "rooks";

export default function App() {
  const [selectedItems, itemControls] = useSetState(new Set());
  const availableItems = ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"];

  const toggleItem = (item) => {
    if (selectedItems.has(item)) {
      itemControls.delete(item);
    } else {
      itemControls.add(item);
    }
  };

  return (
    <div>
      <div>Selected items: {Array.from(selectedItems).join(", ")}</div>
      <div>Total selected: {selectedItems.size}</div>
      <br />
      {availableItems.map((item) => (
        <label key={item} style={{ display: "block", margin: "5px 0" }}>
          <input
            type="checkbox"
            checked={selectedItems.has(item)}
            onChange={() => toggleItem(item)}
          />
          {item}
        </label>
      ))}
      <br />
      <button onClick={() => itemControls.clear()}>Clear Selection</button>
    </div>
  );
}

Parameters

Argument value	Type	Description	Default
initialSetValue	`Set<T>`	Required Set copied into the initial state	—

Return value

Returns an array with two elements:

Return value	Type	Description	Default
set	`Set<T>`	The current immutable Set snapshot	—
controls	`UseSetStateControls<T>`	Memoized Set manipulation methods	—

Control Methods

Method	Type	Description
add	`(value: T) => void`	Add one value to the set
delete	`(value: T) => void`	Delete one value from the set
clear	Function	Remove all values from the set

Behavior and lifecycle

Every operation creates a new Set before mutation. Previously returned snapshots and the caller's initial Set remain unchanged, and multiple operations in one React batch compose safely.

Compatibility and accessibility

The hook has no browser dependency and is SSR-safe. When a Set represents selected UI items, keep checkbox or option state synchronized with set.has(value) and provide a visible label for the group.

useNativeMapState manages keyed values in a native Map.
useArrayState offers ordered collection helpers.

useSetState

On this page