A TSX component using the useDebounce hook for search-as-you-type.
"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);+3 more lines…
Updated Jul 17, 2026