Custom Hook: useDebounce

hooksmedium

20:00starts when you type

Guide

Challenge mode

# Requirements status

not runreturns the initial value right away
not rundoes not update the value before the delay passes
not runupdates the value once the delay passes

# Edge cases

They are shown when you run the tests. Until then they appear as a hidden requirement.

hiddenHidden requirement
hiddenHidden requirement
hiddenHidden requirement
hiddenHidden requirement
hiddenHidden requirement

# Statement

Goal

Create the useDebounce(value, delay) hook that delays a value until it stops changing. You practice effects with useEffect and their cleanup function.

What you already have

A skeleton of the hook, as a named export, and a demo with an input that uses it.
Your job is the logic: return the delayed value using state and a timer.
Keep the name useDebounce and the export: the tests exercise the hook through a test component.

Requirements

On the first render it returns the received value right away.
When value changes, the returned value stays the previous one until delay milliseconds pass.
After the delay, the hook returns the new value.

Example

You render with "a" → the hook returns "a" instantly.
You change to "b" with a delay of 500 → for 500 ms it keeps returning "a".
The 500 ms pass → it returns "b".

Hints

Hint 1

Store the delayed value in useState, starting with the initial value.

Hint 2

A useEffect that depends on value and delay can schedule a setTimeout.

Hint 3

The function the effect returns is the place to call clearTimeout.

Concepts

Custom hooks.
useEffect with dependencies.
Effect cleanup (clearTimeout).

App.jsx

Preview

The console is empty

Run your code with Ctrl+S

This console starts empty every time the preview loads. The browser's DevTools console keeps the messages with Preserve log.