基于useEffect实现的useDebounce出现内存泄漏警告如何处理

开发者阿泽

2026-9-27

React useDebounce 防抖Hook内存泄漏修复方案

修改后的完整代码如下：

import { useEffect, useRef } from 'react';

function useDebounce(value, cost, fn, delay) {
  // 追踪组件挂载状态
  const isMounted = useRef(true);

  useEffect(() => {
    // cost不存在时直接跳过定时器创建
    if (!cost) return;

    const handler = setTimeout(() => {
      // 仅组件未卸载且cost存在时执行目标函数
      if (isMounted.current && cost) {
        fn();
      }
    }, delay);

    // 依赖变化/组件卸载时清除定时器
    return () => {
      clearTimeout(handler);
    };
  }, [value, cost, fn, delay]);

  // 组件卸载时更新挂载标记
  useEffect(() => {
    return () => {
      isMounted.current = false;
    };
  }, []);
}

核心调整点

新增isMounted ref标记组件生命周期状态，组件卸载时自动更新为false，定时器回调执行前先校验该标记，彻底避免已卸载组件执行状态更新逻辑，消除内存泄漏警告
增加cost状态校验逻辑：定时器创建前先判断cost是否存在，不存在直接跳过防抖逻辑；回调触发时二次校验cost状态，只有存在时才执行目标函数
补全useEffect依赖数组，将所有外部传入的可变参数全部加入依赖，避免闭包捕获旧值导致的逻辑异常