使用Lodash Debounce实现搜索过滤时防抖失效求助

你的防抖失效核心原因是每次组件渲染时都会重新创建新的防抖函数实例，导致每次输入触发的都是全新的防抖逻辑，无法累积延迟效果。以下是具体修复方案：

常见错误写法（你当前的问题所在） #

如果你的代码是类似这样的结构，每次handleChange执行时都会生成新的debounce函数：

const handleChange = (e) => {
  // 每次调用都创建新的防抖函数，等于没有防抖
  debounce(() => {
    // API调用逻辑
    console.log('触发API:', e.target.value);
  }, 500)();
};

修复方案一：用useCallback缓存防抖函数 #

通过useCallback确保整个组件生命周期内只创建一次防抖函数实例：

import { useCallback } from 'react';
import { debounce } from 'lodash';

const Filter = () => {
  // 用useCallback缓存防抖函数，空依赖确保只初始化一次
  const debouncedSearch = useCallback(
    debounce((query) => {
      // 这里写你的API调用逻辑
      console.log('防抖后触发API:', query);
    }, 500),
    []
  );

  const handleChange = (e) => {
    const query = e.target.value;
    debouncedSearch(query);
  };

  return <input type="text" onChange={handleChange} />;
};

修复方案二：将防抖函数定义在组件外部 #

直接在组件函数外定义防抖函数，避免每次渲染重新创建：

import { debounce } from 'lodash';

// 组件外部定义，全局只创建一次防抖函数
const debouncedSearch = debounce((query) => {
  // API调用逻辑
  console.log('防抖后触发API:', query);
}, 500);

const Filter = () => {
  const handleChange = (e) => {
    debouncedSearch(e.target.value);
  };

  return <input type="text" onChange={handleChange} />;
};

进阶优化：用useRef管理防抖函数（推荐） #

搭配useRef和useEffect，可以在组件卸载时取消未执行的防抖任务，避免内存泄漏：

import { useRef, useEffect } from 'react';
import { debounce } from 'lodash';

const Filter = () => {
  const debouncedSearchRef = useRef();

  useEffect(() => {
    // 初始化防抖函数
    debouncedSearchRef.current = debounce((query) => {
      // API调用逻辑
      console.log('防抖后触发API:', query);
    }, 500);

    // 组件卸载时取消防抖任务
    return () => {
      debouncedSearchRef.current.cancel();
    };
  }, []);

  const handleChange = (e) => {
    debouncedSearchRef.current(e.target.value);
  };

  return <input type="text" onChange={handleChange} />;
};

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