react hook函数防抖

一、创建hooks/useDebounce.tsx
import { useState, useEffect } from “react”;

function useDebounce(value: any, delay = 300) {
const [debouncedValue, setDebouncedValue] = useState(value)
useEffect(() => {
const handler = window.setTimeout(() => {
setDebouncedValue(value)
}, delay)
return () => {
clearTimeout(handler)
}
}, [value, delay])
return debouncedValue
}

export default useDebounce

二、使用
import useDebounce from ‘…/…/hooks/useDebounce’

const debouncedValue = useDebounce(inputValue, 500)

useEffect(() => {
    if (debouncedValue) {
        const results = fetchSuggestions(debouncedValue)
        if (results instanceof Promise) {
            setLoading(true)
            results.then(data => {
                setLoading(false)
                setSugestions(data)
            })
        } else {
            setSugestions(results)
        }
    } else {
        setSugestions([])
    }
}, [debouncedValue])