useArray — JavaScript Challenge | FineFrontend

Practice workspaceSign in

JavaScript/useArraymedium

00:00

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

JavaScript interview question

useArray

medium20 min

Implement a real React hook that manages an array of items and provides convenient methods for adding, filtering, replacing, removing, clearing, and resetting them. The JavaScript and TypeScript variants must expose the same interface.

The supplied tests render real React components, including a Strict Mode case. Updates must be visible after React rerenders, and batched operations must compose correctly.

Requirements

Export useArray(initialValue = []) as both a named and default function. initialValue is a dense array of arbitrary items, including objects and functions; only its mount-time value initializes the hook.
Return { array, setArray, push, filter, update, remove, clear, reset }. array is the current array state, and every method returns void.
push(item) appends exactly one item. A function-valued item must be stored as an item, never invoked as an updater.
filter(predicate) keeps the items for which predicate returns a truthy value, preserving order. Invoke predicate(item, index, pendingArray) with standard Array.prototype.filter behavior.
update(index, item) replaces the item at a zero-based index. remove(index) removes exactly that position. Only integer number indices in [0, pendingArray.length) are valid; invalid indices must leave the state array reference unchanged.
clear() replaces state with an empty array. reset() replaces state with a fresh shallow copy of the array supplied on the first render. Later initialValue changes must not change current state or the reset target.
setArray must behave like React's state setter: accept a replacement array or a pure updater (previousArray) => nextArray. Pass it through without cloning replacement arrays or altering React's no-op updater behavior.
Use React state and immutable updates. Copy the supplied array on mount and retain an independent shallow mount-time snapshot for reset. Utilities must never mutate the supplied array or any previous state array.
All seven method identities, including reset and setArray, must stay stable between renders. Previously captured methods must operate on the latest pending state; multiple calls in one event must be applied in order.
Each hook instance must have independent state. Copies are shallow: preserve item identities, without deep cloning object items. Consumers must treat returned arrays, item objects, setter replacements, and predicate/updater arguments as read-only; protection against consumer mutation of those values is outside scope.
In TypeScript, implement useArray<T>(initialValue?: ReadonlyArray<T>): UseArrayResult<T>, preserve the item type throughout the API, and support an explicit generic for an empty array. Invalid non-array initial values and throwing or mutating callbacks are outside scope.

Examples

Example 1

Input: useArray([1, 2]); then push(3)
Output: array is [1, 2, 3].

Example 2

Input: useArray([1, 2, 3]); then filter((item) => item > 1)
Output: array is [2, 3].

Example 3

Input: useArray(['a', 'b']); then update(1, 'B'); then remove(0)
Output: array is ['B'].

Example 4

Input: useArray([1, 2]); then clear(); then reset()
Output: array is [1, 2], using a fresh shallow copy of the mount-time snapshot.

Example 5

Input: useArray([1]); then push(2); push(3) in one event
Output: array is [1, 2, 3].

Returns the current array on each render and seven stable methods. Examples describe state after the corresponding React rerender.

What the tests check

Defaults to an empty array and exposes the complete API
Copies initial values without changing their order
push appends one item without mutating the previous array
Function-valued items are stored rather than called
filter retains matching items in their original order
filter supplies the item, index, and pending array to its predicate
update replaces an item by index and preserves the other items
remove deletes only the item at the requested index
clear empties the array without mutating previous state
reset restores the mount-time initial items after edits
setArray accepts a replacement array
setArray supports React updater functions
Batched pushes append every item in order
Mixed batched utilities use the latest pending array
Invalid update indices preserve the array reference
Invalid remove indices preserve the array reference
All method identities stay stable across updates and rerenders
Previously captured utilities update the latest state
Changing initialValue after mount does not reset state or reset's target
Mutating the supplied array later cannot change state or the reset snapshot
Every reset returns a fresh shallow copy of the initial snapshot
Separate hook instances own independent arrays and snapshots
Utilities work with frozen input and frozen previous state
Object items keep their identities because copies are shallow
React setter updates compose with the utilities in one batch
clear followed by push composes in a single batch
reset followed by push composes in a single batch
Empty-array filtering, updates, and removals behave predictably
setArray preserves standard React no-op updater behavior
Pure array updates stay correct under React Strict Mode

References

React useState React useCallback Updating arrays in React state

React HooksArraysStateuseStateuseCallbackImmutable array updatesFunctional updatesGeneric types

Back

Preparing your workspace…