useDebouncedValue & useDebouncedCallback in React

import { useEffect, useState, useRef, useCallback } from 'react'

function useDebouncedValue<T>(value: T, delay = 300) {
  const [debounced, setDebounced] = useState(value)
  useEffect(() => {
    const t = setTimeout(() => setDebounced(value), delay)
    return () => clearTimeout(t)
  }, [value, delay])
  return debounced
}

// Usage
function Search() {
  const [q, setQ] = useState('')
  const debouncedQ = useDebouncedValue(q, 300)
  useEffect(() => {
    if (debouncedQ) fetch('/api/search?q=' + debouncedQ)
  }, [debouncedQ])
  return <input value={q} onChange={(e) => setQ(e.target.value)} />
}