Debounced search input

A TSX component using the useDebounce hook for search-as-you-type.

TSX11 linesUpdated Jul 17, 2026

TSX

"use client";
import { useEffect, useState } from "react";

export function SearchBox({ onSearch }) {
  const [query, setQuery] = useState("");
  useEffect(() => {
    const t = setTimeout(() => onSearch(query), 300);
    return () => clearTimeout(t);
  }, [query, onSearch]);
  return <input value={query} onChange={(e) => setQuery(e.target.value)} />;
}