Debouncing (fire function only once in few second) with react hooks - reactjs

Question

I need to implement tag search on user input, but input is fast and i don't want to fire DB call for every symbol user typed, so i was curios, is there a simple a good way to debounce api calls let's say - one time after 3 seconds delay?
For now i come up with this:
let searchDelay
async function handleTagSearch(e) {
clearTimeout(searchDelay)
tagSearchPhraseSet(e.target.value)
searchDelay = setTimeout(async () => {
if (e.target.value.length > 3) {
let res = await fetch('api/tag_seatch/' + e.target.value)
res = await res.json()
console.log(res)
}
}, 3000)
}
But is it a right approach?

Answer 1

Your solution looks promising, if you make sure that the searchDelay number is persisted between renders with e.g. a useRef hook.
Another way of going about it is to use a useEffect hook that is run every time the input value changes. From the function given to useEffect you can return a function that clears the timeout of the previous time it was run.
Example
const { useState, useEffect } = React;
function App() {
const [value, setValue] = useState("");
const [result, setResult] = useState(null);
useEffect(
() => {
if (value.length < 3) {
setResult(null);
return;
}
const timeout = setTimeout(() => {
setResult(Math.random());
}, 3000);
return () => clearTimeout(timeout);
},
[value]
);
return (
<div>
<input value={value} onChange={e => setValue(e.target.value)} />
<div>{result}</div>
</div>
);
}
ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<div id="root"></div>

Answer 2

Thanks to #Tholle example i understood that qoute "The function returned from the useEffect function will be invoked every time it is run again, and on unmount as you say" and came up with this solution:
import React, { useState, useContext, useEffect, useRef } from 'react'
export function TagsAdd() {
const [searchTerm, searchTermSet] = useState('')
const isFirstRun = useRef(true)
useEffect(() => {
//skip first run on component mount
if (isFirstRun.current) {
isFirstRun.current = false
return
}
const timeout = setTimeout(() => {
tagSearch(searchTerm)
}, 2000) //2000 - timeout to execute this function if timeout will be not cleared
return () => clearTimeout(timeout) //clear timeout (delete function execution)
}, [searchTerm])
// API call only one time in 2 seconds for the last value! Yeeeee
async function tagSearch(value) {
let res = await fetch('api/tag_seatch/' + value)
res = await res.json()
console.log(res)
}
//handle input change
function handleInput(e) {
searchTermSet(e.target.value)
}
return (
<div>
<input value={searchTerm} onChange={handleInput} />
</div>
)
}

Answer 3

the first thing you need to consider is using useCallback for memoization, if you just write a plain function it will be re-instantiated on each re-render. IMO you should use lodash's debounce function instead of implementing your own. the result looks something like this:
const searchTags = useCallback(debounce(async evt => {
const { value } = evt.target;
if(value.length > 3){
const response = await fetch('/api/tag_search', value);
const result = await response.json();
setTags(result) //or somewhere in your state
}
}, 3000, { trailing: true, leading: false }));