Make a delay in a database query

Question

I have an ID search field on my site, where the user enters characters (letters, numbers, whatever), and the corresponding ID is searched in the database (those IDs that have a sequence of entered characters).

For example, there are records in the database ("petya", "paul", "polina", "pelageya", "andrew"). When the user enters the letter "p" in the search field, the following entries will be displayed: "petya", "paul", "polina", "pelageya". Further, when the user enters "pe", he will see the entries: "petya", "pelageya". And when the user enters "pet", the user will only see the entry "petya".

Everything is simple here.

A small problem is that the request to the server goes constantly. I would like to make a small delay (half a second). If the user does not enter anything for half a second, only then send a query to the database.

That is, in the example above, requests are sent to the server sequentially: "p", then "pe", and then "pet". But I would like to do so that if the time between entering these three letters does not exceed half a second, then one final request would go to the server, only "pet"

function Search() {
    const { filters, setFilters } = useContext(PageContext)
    const [input, setInput] = useState("")

    useEffect(() => {
        var tmpFilters = { ...filters }
        tmpFilters.search = input
        setFilters(tmpFilters)
    }, [input])


    return (
      <div>     
          <CssTextField  
              value={input}
              onChange={(e) => { setInput(e.target.value) }}/>
      </div>
    )
}

The term you want is "debounce". https://dmitripavlutin.com/react-throttle-debounce/ — ceejayoz, Mar 29 '23 at 11:22

score 1 · Accepted Answer · answered Mar 29 '23 at 12:08

I think its probably more or less like this link, with the use of useEffect can you control when it should send or not. How to start search only when user stops typing?

i also saw this url that could help alot https://eight-bites.blog/en/2021/06/wait-user-typing/

Basically you just do this

useEffect(() => {
  const timer = setTimeout(() => {
    //call api here
    var tmpFilters = { ...filters }
    tmpFilters.search = input
    setFilters(tmpFilters)
  }, 500); // <-- amount of ms to wait
    

  return () => clearTimeout(timer)
}, [input])

Make a delay in a database query

1 Answers1