react中防抖失效的根本原因是函数式组件重渲染导致debounce函数重复创建、计时器重置；解决方案是用useref缓存防抖函数实例，或结合usecallback与useref管理依赖值，自定义usedebounce hook可简化实现。
防抖在 React 中失效，根本原因不是防抖逻辑错了，而是函数式组件每次重渲染都会重新执行整个函数体——包括 debounce 调用，导致每次生成的防抖函数都是全新实例，内部计时器（timer）被重置，前一次的延迟被清除，自然就“不防抖”了。
用 useRef 缓存防抖函数本身
这是最直接、最稳妥的解法。把防抖函数挂载到 ref 上，让它脱离渲染周期，只创建一次：
- 用
useRef初始化一个空 ref，比如const debouncedFn = useRef() - 在
useEffect中（或组件首次加载时）初始化它：debouncedFn.current = debounce(handler, 300) - 事件回调里调用
debouncedFn.current(...args)，而不是直接调用debounce(...)(...)
这样无论组件重渲染多少次，debouncedFn.current 始终指向同一个防抖函数实例，计时器状态得以保留。
用 useCallback + useRef 管理依赖值
如果防抖函数需要读取最新 state（比如搜索关键词 searchKey），不能简单地把 debounce 放进 useCallback 且依赖为空数组（否则拿不到新值）；也不能把 state 加进依赖（否则每次更新都重建防抖函数）。
- 把需要响应的 state 改为
useRef管理：const searchKeyRef = useRef(searchKey) - 在
useEffect中同步 ref：useEffect(() => { searchKeyRef.current = searchKey }, [searchKey]) - 再用
useCallback创建防抖函数，闭包内读取searchKeyRef.current
这样既保证了防抖函数稳定，又能访问到最新的业务数据。
避免常见误区：useCallback 包裹 debounce 但忽略依赖
很多人写成这样：
const debouncedSearch = useCallback(debounce(fetchData, 500), []);
看似防抖生效了，但问题在于：如果 fetchData 本身依赖了某个 state，而这个 state 在 debounce 外部闭包中被捕获，那它永远是初始值。更糟的是，若强行把 state 加进 useCallback 依赖数组，防抖函数就会随 state 更新而重建，计时器重置，又回到失效状态。
所以单纯靠 useCallback 无法解决“既要最新值，又要函数稳定”的矛盾，必须配合 useRef 打破闭包捕获的 stale value 问题。
补充：自定义防抖 Hook 更简洁
把上述逻辑封装成可复用的 Hook，比如：
function useDebounce(callback, delay) {
const callbackRef = useRef(callback);
useEffect(() => { callbackRef.current = callback }, [callback]);
return useCallback((...args) => {
const later = () => callbackRef.current(...args);
clearTimeout(timerRef.current);
timerRef.current = setTimeout(later, delay);
}, [delay]);
}
使用时只需：const debouncedSubmit = useDebounce(handleSubmit, 300)，干净且不易出错。
