useCounter II — JavaScript Challenge | FineFrontend

Practice workspaceSign in

JavaScript/useCounter IIeasy

00:00

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

JavaScript interview question

useCounter II

easy15 min

Implement an optimized version of the useCounter React hook. Keep its existing counter API and state behavior while preserving utility method identities and avoiding a new result object when the count has not changed.

Use the JavaScript or TypeScript variant. The supplied tests render real React components and verify both state updates and reference identity across ordinary rerenders.

Requirements

Export useCounter(initialValue = 0) as both a named and default function. Call it inside a React component or another hook.
Return { count, setCount, increment, decrement, reset }. count is a number; increment() adds 1 and decrement() subtracts 1. These utilities do not accept a step argument.
setCount accepts a direct number or an updater (previous: number) => number, matching React state setter behavior.
Only use the first rendered initialValue to initialize state. Later argument changes must not change the current count. reset() always restores that original mount value.
State changes must trigger React rerenders. Functional updates and mixed batched operations must execute in order using the latest pending state. Saved callbacks must remain correct after later updates.
All four method references (setCount, increment, decrement, reset) must remain stable across ordinary count changes, unrelated parent rerenders, and later initialValue argument changes.
Return the same result object during ordinary parent rerenders if count has not changed. Return a new result object when count changes and never mutate a previously returned result object.
Each hook instance owns independent state. Use React state and memoization; a mutable object or external store is not a valid replacement for this React hook.
Inputs and setter results are finite numbers. Invalid inputs, step sizes, min/max bounds, persistence, React cache eviction during development edits, and suspended initial mounts are outside scope.

Examples

Example 1

Input: useCounter()
Output: count is 0 on the first render.

Example 2

Input: useCounter(5); increment(); increment() in one event
Output: count becomes 7 after React processes the batched updates.

Example 3

Input: setCount((previous) => previous * 2); reset()
Output: reset restores the original mount value, even if the initialValue argument has since changed.

Example 4

Input: A parent rerenders while count is unchanged
Output: The result object and all four methods retain their references.

Example 5

Input: increment() changes count
Output: The result object is new, its count reflects the update, and all four methods retain their references.

A React hook with the same counter API as useCounter, plus stable methods and a memoized result object during ordinary mounted rerenders.

What the tests check

Defaults to zero and exports both entry points
Accepts a positive initial count
Accepts a negative initial count
Preserves fractional initial values
Increment adds one and triggers a rerender
Decrement subtracts one including below zero
setCount accepts direct numeric values
setCount accepts an updater function
Batched increments compose using pending state
Batched decrements compose using pending state
Mixed batched setters and utilities execute in order
Reset restores the original count after updates
Reset and a following increment compose in one batch
Changing the initial argument does not replace current state
Reset still uses the mount value after an argument change
Every utility identity stays stable across count changes
Setter identity remains stable for direct and functional updates
Reset identity remains stable when the initial argument changes
Methods remain stable during unrelated parent rerenders
Returned object is memoized while count remains unchanged
Every changed count produces a new immutable snapshot
A no-op setter preserves the result on the next parent render
Saved increment and decrement callbacks use the latest state
A saved reset callback retains the original mount value
Separate hook instances own independent counters and snapshots
An initial argument change keeps the memoized current snapshot
State, reset, and memoized identities work in React StrictMode

References

React useState React useCallback React useMemo React useRef

React HooksStateMemoizationuseStateuseCallbackuseMemouseRefFunctional updatesStable identities

Back

Preparing your workspace…