async.js

const useAsyncDerivedValue = (value, f) => {
  const [derivedValue, setDerivedValue] = useState(null)
  const [debouncedValue] = useDebounce(value, 500)
  useEffect(() => {
    let cancelled = false

    f(debouncedValue).then(result => {
      if (!cancelled) setDerivedValue (result)
    })

    return () => { cancelled = true }
  }, [debouncedValue])

  return derivedValue
}

debounce.txt

Debounce => https://github.com/xnimorz/use-debounce