useSet

Hook to use Set data structure to handle component state with all Set methods.

Demo

INFO

The component has:

• A useSet internal state.
• An uncontrolled input with inputRef ref used to execute buttons actions.
• A button Add that adds the input value into state by add method of Set interface.
• A button Delete that remove item into state by key, written in input by delete method of Set interface.
• A button Clear that clear state by clear method of Set interface.
• A variable parsed create with useMemo that memoized a concatenated string of state values, separated by comma.

Loading demo…

Show source code

import { useCallback, useMemo, useRef } from "react";
import { useSet } from "../../../..";

const UseSet = () => {
	const set = useSet<string | number>();

	const inputRef = useRef<HTMLInputElement>(null);

	const del = useCallback(() => {
		set.delete(inputRef.current!.value);
	}, [set]);

	const add = useCallback(() => {
		const { value } = inputRef.current!;
		set.add(value);
	}, [set]);

	const clear = useCallback(() => {
		set.clear();
	}, [set]);

	const parsed = useMemo(() => {
		const temp: (string|number)[] = [];
		set.forEach((value) => temp.push(value));
		return temp.join(", ");
	}, [set]);

	return (<>
		{parsed}
		<br/>
		<input ref={inputRef} type="text" />
		<br />
		<div style={{ marginTop: 15, gridTemplateColumns: 'auto auto', justifyContent: 'center', display: 'grid', gap: '5px' }}>
			<button onClick={add}>Add</button>
			<button onClick={del}>Delete</button>
			<button onClick={clear}>Clear</button>
		</div>
	</>);
}

UseSet.displayName = "UseSet";

export {UseSet}

Types

UseSetProps

• @template T - The type of the elements contained in the set.

Parameters accepted by useSet.

Property	Type	Required	Description
initialState	Iterable<T> \| (() => Iterable<T>)		The initial set state. Accepts any Iterable&lt;T&gt; (e.g. an array, another Set, or a generator) or a lazy initializer function returning such an iterable, invoked only on the first render. When omitted, the set is initialised as empty.

UseSetResult

• @template T - The type of the elements contained in the set.

Return value of useSet. A reactive Set<T> whose mutating methods automatically synchronise the underlying React state. All standard read-only methods (has, keys, values, entries, forEach, etc.) are inherited unchanged from Set<T>. The following mutating methods are overridden to trigger a re-render:

Method	Behaviour
add	Adds value to the set, triggers a re-render, and returns the updated set.
clear	Removes all values and triggers a re-render.
delete	Removes value and triggers a re-render. Returns true if the value existed, false otherwise.

export type UseSetResult<T> = Set<T> & {
	/**
	 * Adds `value` to the set, triggers a re-render, and returns the updated set.
	 */
	add(value: T): Set<T>;

	/** Removes all values from the set and triggers a re-render. */
	clear(): void;

	/**
	 * Removes `value` from the set and triggers a re-render. Returns `true` if
	 * the value existed in the set before deletion, `false` otherwise.
	 */
	delete(value: T): boolean;
};