useDebounce — JavaScript Challenge | FineFrontend

Practice workspaceSign in

JavaScript/useDebouncemedium

00:00

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

JavaScript interview question

useDebounce

medium20 min

Build a React hook that delays publishing a changing value until it has stayed unchanged for a specified period. This is useful for search inputs that should not trigger work on every keystroke.

The JavaScript and TypeScript variants share the same contract. Tests render real React components and exercise updates and lifecycle cleanup.

Requirements

Export useDebounce(value, delay) as a named and default React hook. Return the debounced value itself, not a tuple. In TypeScript, preserve the input type with useDebounce<T>(value: T, delay: number): T.
The first render must return the supplied value immediately. Values can be any JavaScript value, including objects and functions; preserve their identities and never invoke a function-valued input.
When value changes according to Object.is, retain the previously published value and schedule publication after delay milliseconds. Cancel a pending publication if value changes again; only the latest value may be published.
Changing delay also cancels and restarts the pending timer using the current value. An unrelated rerender with the same value and delay must not restart the timer.
delay is a finite nonnegative number. A zero delay still publishes asynchronously on a later timer turn. Invalid delays and deep equality comparisons are outside scope.
Clear pending timers on unmount and when dependencies change. Instances must be independent, and React Strict Mode must not leave duplicate active timers.
Use real React state and effects. This hook only debounces a value; request cancellation, fetching, and markup are outside the exercise.

Examples

Example 1

Input: useDebounce("cat", 200)
Output: Returns "cat" immediately.

Example 2

Input: Change the input from "cat" to "cats" with delay 200
Output: Returns "cat" until 200 ms have passed without another change, then returns "cats".

Example 3

Input: Change "a" to "ab", then to "abc" before the delay expires
Output: Only "abc" is published after the final quiet period.

Examples describe the current return value after the corresponding React render or event.

What the tests check

Publishes the mount-time value immediately
Keeps the previous value until the timer completes
Only publishes the latest value after rapid changes
Cancels and replaces timers when the delay changes
Unrelated rerenders do not restart a pending timer
Stores function values without invoking them
Preserves object identity and supports undefined
Treats NaN as unchanged
A zero delay publishes on a later timer turn
Clears a pending timer on unmount
Keeps instances independent
Handles effect replay in Strict Mode

References

React useEffect React useState

React HooksTimersStateEffect cleanupDebouncingGeneric stateFunction valued state

Back

Preparing your workspace…