use-debounce-hook

1npm install @cupofcode/hooks
2// atau copy hook langsung ke project kamu

1import { useState, useEffect } from 'react';
2
3/**
4 * Debounce sebuah nilai dengan delay tertentu.
5 * Berguna untuk search input, filter, atau autocomplete.
6 *
7 * @param value - Nilai yang akan di-debounce
8 * @param delay - Waktu tunda dalam milidetik (default: 300ms)
9 */
10export function useDebounce<T>(value: T, delay: number = 300): T {
11  const [debouncedValue, setDebouncedValue] = useState<T>(value);
12
13  useEffect(() => {
14    const handler = setTimeout(() => {
15      setDebouncedValue(value);
16    }, delay);
17
18    return () => {
19      clearTimeout(handler);
20    };
21  }, [value, delay]);
22
23  return debouncedValue;
24}

1import { useState, useEffect } from 'react';
2import { useDebounce } from './hooks/useDebounce';
3
4function SearchUser() {
5  const [searchTerm, setSearchTerm] = useState('');
6  const debouncedSearch = useDebounce(searchTerm, 500);
7
8  useEffect(() => {
9    if (debouncedSearch) {
10      fetch(`/api/users?q=${debouncedSearch}`)
11        .then(res => res.json())
12        .then(data => console.log('Results:', data));
13    }
14  }, [debouncedSearch]);
15
16  return (
17    <input
18      type="text"
19      value={searchTerm}
20      onChange={(e) => setSearchTerm(e.target.value)}
21      placeholder="Cari user..."
22    />
23  );
24}