QuickSnip
Browse
Tags
+ New
← Back to snippet
Edit snippet
Title
Description
(optional)
A TSX component using the useDebounce hook for search-as-you-type.
Language
JavaScript
TypeScript
JSX
TSX
Python
Go
Rust
Bash
SQL
CSS
HTML
JSON
YAML
Markdown
Tags
Loading tags…
Code
"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)} />; }
Update snippet
Cancel