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
}