debounce & useDebounce
先来看传统的debouce实现
function debounce(fn, limit = 1000) { let tID = 0; return function (...args) { clearTimeout(tID); tID = setTimeout(() => fn(...args), limit); } }
他接受一个函数,并返回一个修改过的debounce版的函数. 比如一个query一个api的时候,会用到debounced query. 而在react里,从数据驱动的角度出发,我们会用到debounced input value而不是debounced query
import { useState, useEffect } from 'react' export default (value, delay) => { const [debouncedValue, setDebouncedValue] = useState(value) useEffect(() => { const handler = setTimeout(() => { setDebouncedValue(value) }, delay) return () => { clearTimeout(handler) } }, [value, delay]) return debouncedValue }