Skip to main content

Search Debounce

Debounce is used so the search input won't fire useEffect each changes

100 views

Debounce Effect will solves problem on overfetching with input

Code

const [searchTerm, setSearchTerm] = useState(''); const [filteredList, setFilteredList] = useState(nrpData); const handleSearch = (e) => { e.preventDefault(); setSearchTerm(e.target.value); }; useEffect(() => { const timer = setTimeout(() => { const results = nrpData.filter( (data) => data.nrp.toLowerCase().includes(searchTerm.toLowerCase()) || data.name.toLowerCase().includes(searchTerm.toLowerCase()) ); setFilteredList(results); }, 200); return () => clearTimeout(timer); }, [searchTerm]);
jsx

The useEffect will have a gap of 200ms to fire.

Usage

To use just put in on the input, and map the list

return ( <input value={searchTerm} onChange={handleSearch} type='text' /> {filteredList.map((item) => (<li keys={item}>{item}</li>))} )
jsx