useSet — JavaScript Challenge | FineFrontend

Practice workspaceSign in

JavaScript/useSetmedium

00:00

Read here. Code on desktop. The coding workspace opens on screens 1024px and wider.

JavaScript interview question

useSet

medium20 min

Build a React hook that manages a JavaScript Set with convenient immutable methods. State updates must trigger React renders, preserve insertion order, and compose correctly when batched.

JavaScript and TypeScript use the same contract. Tests render real React components and cover state updates and lifecycle behavior.

Requirements

Export useSet(initialValue = []) as a named and default React hook. Return { set, setSet, add, remove, toggle, clear, reset }. set is the current Set, and each method returns void.
initialValue is an iterable of items. Copy it into a mount-time Set snapshot and a separate state Set. Deduplicate using native Set semantics, preserving insertion order and item identities. Later initialValue changes must not change state or the reset snapshot.
add(item) appends a missing item. remove(item) deletes a present item. Adding a present item or removing an absent one must leave the state Set reference unchanged.
Use native SameValueZero equality: NaN matches NaN and +0 matches -0; objects and functions compare by identity. Function-valued items must never be invoked.
toggle(item) removes a present item or appends an absent one. clear() produces a fresh empty Set. reset() produces a fresh shallow copy of the mount-time snapshot.
setSet is React’s state setter, accepting a replacement Set or a pure updater(previousSet) => nextSet. Preserve replacement identity and no-op updater behavior.
All six method identities must remain stable. Captured utilities operate on the latest pending state; multiple calls in one event apply in order. Never mutate the initial iterable or previous state Sets.
Each instance is independent and must work in Strict Mode. Copies are shallow. Consumers must treat returned Sets, item objects, replacement Sets, and updater inputs as read-only; consumer mutation protection is outside scope.
In TypeScript use useSet<T>(initialValue?: Iterable<T>): UseSetResult<T>. Preserve item types through the API and allow an explicit generic for an empty Set. Non-iterable inputs and throwing or mutating callbacks are outside scope.

Examples

Example 1

Input: useSet(["a", "a", "b"])
Output: set contains "a", "b" in that order.

Example 2

Input: add("c"); remove("a"); toggle("b")
Output: set contains only "c".

Example 3

Input: clear(); reset()
Output: Restores a fresh Set with the mount-time items.

Examples describe state after the corresponding React render or update.

What the tests check

Deduplicates and preserves insertion order
Copies the initial Set and preserves item identity
Adds a missing item immutably
No-op additions and removals preserve references
Removes a present item
Toggle removes and then appends an item
Composes captured utilities in a batch
Clear and reset create fresh Sets
Later initial values do not change the reset target
Stores function items without calling them
Uses SameValueZero and object identity
Passes replacement Sets and updaters through
Keeps all method identities stable
Keeps instances independent in Strict Mode

References

React useState

React HooksSetsStateImmutable Set updatesFunctional state updatesStable utilitiesGeneric types

Back

Preparing your workspace…