Create a Debounced Search Input

React

JavaScript

Technical Specification

Implement a search input that only triggers filter/API logic after the user stops typing for some time.

Input/Output Samples

Input:Type quickly 'react'

Output:Search only fires once after typing stops

Optimal Logic Path

import { useState, useEffect } from "react";

function useDebouncedValue(value, delay) {
  const [debounced, setDebounced] = useState(value);

  useEffect(() => {
    const id = setTimeout(() => setDebounced(value), delay);
    return () => clearTimeout(id);
  }, [value, delay]);

  return debounced;
}

function DebouncedSearch() {
  const [query, setQuery] = useState("");
  const debounced = useDebouncedValue(query, 300);

  useEffect(() => {
    if (!debounced) return;
    // call API or filter list
  }, [debounced]);

  return (
    <input
      value={query}
      onChange={(e) => setQuery(e.target.value)}
      placeholder="Search..."
    />
  );
}

Architectural Deep-Dive

We maintain two states: immediate input and debounced value that updates after a delay.