debounce & useDebounce

11/23/2021 #reactjs #hooks

先来看传统的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
}