Debounced Search Input

Requirements

Implement an input debouncing function in React and TypeScript. When a user typing in a search bar modifies the query value, delay the remote API fetch operation by 300ms. If they type again before the timeout expires, cancel the pending action.

Expected Output

A reusable React hook `useDebounce` and search input component demonstrating API call throttling.

Hints & Tips

1Create a local timer reference using `useEffect`.
2Return a cleanup function in `useEffect` that calls `clearTimeout()`.
3Rely on generics so the debounce hook handles any generic data type values.

Senior Code Review Checklist

0 / 4 Checked

Common Architectural Mistakes

1Forgetting to declare the hook's cleanup function, which leaks memory and triggers out-of-order API queries.
2Debouncing the input state directly instead of debouncing the query trigger value, causing typing lags.
3Using local state inside hooks without tracking value change parameters.

Developer Solution

Click to toggle the recommended code solution

Architectural Explanation

The custom `useDebounce` hook registers a setTimeout buffer. It relies on useEffect's standard return cleanup loop to abort pending timers, preventing concurrent API requests during active typing.

Code Snippet

typescript

import { useState, useEffect } from "react";

export function useDebounce<T>(value: T, delay = 300): T {
  const [debouncedValue, setDebouncedValue] = useState<T>(value);

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => {
      clearTimeout(handler);
    };
  }, [value, delay]);

  return debouncedValue;
}

Explain in Interview

How to pitch this solution during technical interviews

I prevent request flooding by implementing a useDebounce hook. It registers a timeout inside useEffect to update a debounced value state. If the monitored dependency updates before the timer finishes, the cleanup function fires and kills the pending timer.

Loading content…

Requirements

Expected Output

A reusable React hook `useDebounce` and search input component demonstrating API call throttling.

import { useState, useEffect } from "react"; export function useDebounce<T>(value: T, delay = 300): T { const [debouncedValue, setDebouncedValue] = useState<T>(value); useEffect(() => { const handler = setTimeout(() => { setDebouncedValue(value); }, delay); return () => { clearTimeout(handler); }; }, [value, delay]); return debouncedValue; }