Search Debounce

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