useDebounce

won’t run until timer is up and resets the timer if called again before running.

import { useMemo } from 'react'
export const useDebounce = (callback, delay) =>
  useMemo(() => {
    let timer
    return (...args) => {
      clearTimeout(timer)
      timer = setTimeout(() => callback(...args), delay)
    }
  }, [callback, delay])
// usage
const debouncedLog = useDebounce(value=>console.log(value), 300)
<inputonChange={debouncedLog}/>