useDebounce Hook

1import { useState, useEffect } from "react";
2
3function useDebounce<T>(value: T, delay: number): T {
4const [debouncedValue, setDebouncedValue] = useState<T>(value);
5
6useEffect(() => {
7const handler = setTimeout(() => {
8setDebouncedValue(value);
9}, delay);
10
11return () => {
12clearTimeout(handler);
13};
14}, [value, delay]);
15
16return debouncedValue;
17}
18
19// Usage in a search component
20function SearchComponent() {
21const [searchTerm, setSearchTerm] = useState("");
22const debouncedSearch = useDebounce(searchTerm, 500);
23
24useEffect(() => {
25if (debouncedSearch) {
26// Perform search
27console.log("Searching:", debouncedSearch);
28}
29}, [debouncedSearch]);
30
31return (
32<input
33value={searchTerm}
34onChange={(e) => setSearchTerm(e.target.value)}
35placeholder="Search..."
36/>
37);
38}