useDebounce Custom Hook

Custom Hooks — Intermediate React challenge.

Implement a custom hook that delays propagating a value until a given amount of time has passed without further changes. Useful for search inputs, autosave, and throttled event streams.

Requirements

• Return the latest value only after `delay` ms of inactivity.
• Cancel any pending update when the component unmounts.
• Re-debounce when either `value` or `delay` changes.
• Never trigger more than one synchronous render per change.

Signature

function useDebounce<T>(value: T, delay?: number): T

Example

const [q, setQ] = useState("");
const debounced = useDebounce(q, 300);

Constraints

• 0 ≤ delay ≤ 5000 ms · default 300
• value is any non-Promise type
• No external dependencies