React - start searching when the user stops typing

Question

I have searchInput in my app to search between an array of objects. I want to start searching when the user stops typing. Where is better to clear the timeout? and how?

this is my searchInput:

<input
  value={this.state.searchInput}
  id="searchInput"
  onChange={this.inputsChangedHandler}
/>

contacts is my main state. searchedContact should display when the user stops typing.

  inputsChangedHandler = (e) => {
    let searched = this.state.contacts.filter((i) => {
      return (
        i.numbers.includes(e.target.value) ||
        i.name.includes(e.target.value) ||
        i.family.includes(e.target.value)
      );
    });
    this.setState(
      {
        [e.target.id]: e.target.value,
      },
      () => {
        setTimeout(() => {
          this.setState({
            searchedContact: searched,
          });
        }, 2000);
      }
    );
  };

If you are already using any JS utility library like lodash then `_.debounce` can help you out here. Otherwise you may create your own debounce method. — Diwakar Singh, May 01 '22 at 07:43
thank you dear @DiwakarSingh. I was looking for this concept's name. — hossein fti, May 01 '22 at 07:51

score 3 · Answer 1 · answered May 01 '22 at 08:04

check this answer click here

unction Search() {
  const [searchTerm, setSearchTerm] = useState('')

  useEffect(() => {
    const delayDebounceFn = setTimeout(() => {
      console.log(searchTerm)
      // Send Axios request here
    }, 3000)

    return () => clearTimeout(delayDebounceFn)
  }, [searchTerm])

  return (
    <input
      autoFocus
      type='text'
      autoComplete='off'
      className='live-search-field'
      placeholder='Search here...'
      onChange={(e) => setSearchTerm(e.target.value)}
    />
  )
}

score 2 · Answer 2 · answered May 01 '22 at 08:45

I have write my own custom hook , useTrottle - like this

import {useState, useDebugValue} from 'react';
    const useThrottle = (func, delay) => {
    const [timeout, saveTimeout] = useState(null);
    useDebugValue(delay);
    const throttledFunc = function () {
        if (timeout) {
            clearTimeout(timeout);
        }

        const newTimeout = setTimeout(() => {
            func(...arguments);
            if (newTimeout === timeout) {
                saveTimeout(null);
            }
        }, delay);
        saveTimeout(newTimeout);
    }

    return throttledFunc;
}

export default useThrottle;

you can use this hook on your components by this way

const throttle = useThrottle((term) => {
    // make what you want
}, THROTTLE_DELAY);

const changeHandler = useCallback((event) => {
        setTerm(event.target.value);
        throttle(event.target.value);
    }, [throttle,setTerm])

React - start searching when the user stops typing

2 Answers2