先来看这段常见的自定义useDebounce Hook实现：

import { useState, useEffect } from 'react';
export default function useDebounce(value: any, delay: number) {
  const [debouncedValue, setDebouncedValue] = useState(value);
  useEffect(
    () => {
      const handler = setTimeout(() => {
        setDebouncedValue(value);
      }, delay);
      return () => {
        clearTimeout(handler);
      };
    },
    [value, delay] // 注：原代码遗漏了依赖数组，实际使用必须添加，否则会无限重复创建定时器
  );
  return debouncedValue;
}

比起直接用Lodash的_.debounce这类普通防抖函数，这个React专属Hook有几个很实用的优势：

• 自动贴合React生命周期，避免内存泄漏
  普通防抖函数脱离React组件环境，不知道组件的挂载/卸载状态。比如组件卸载后，普通防抖的定时器如果还在运行，尝试更新已销毁组件的状态会直接抛出错误。而useDebounce借助useEffect的清理机制，组件卸载时会自动清除定时器，从根源上避免这类问题。

• 自动响应状态/依赖变化
  这个Hook的useEffect依赖于传入的value和delay，当这两个值变动时，会自动清除旧定时器并创建新的。比如搜索框输入内容变化、动态调整防抖延迟时间时，Hook会自动同步更新防抖逻辑。而普通防抖函数需要你手动监听这些变化，手动重置防抖逻辑，代码会冗余很多。

• 更符合React状态管理思维
  使用这个Hook时，你直接拿到的是防抖后的状态值，可以像使用普通React状态一样渲染、作为请求参数，完全融入React的数据流。而普通防抖函数通常是包裹回调函数，你需要额外处理回调内的状态同步（比如用useCallback或useRef确保拿到最新状态），逻辑更绕。

• 轻量化，无需额外依赖
  如果项目里没引入Lodash这类工具库，用这个自定义Hook就不用为了防抖功能特意增加依赖体积。就算已经用了Lodash，这个Hook和React的集成度也更高，针对性更强。

内容的提问来源于stack exchange，提问作者Hayk