React Hook useCallback依赖未知问题求助：useMemo无效该如何修复？

问题根源 #

你遇到的报错是因为直接将debounce的返回值传给了useCallback：React的ESLint规则无法识别防抖函数内部引用的dispatch，同时useCallback的空依赖数组也不符合Hook的依赖追踪要求。另外，每次组件渲染时debounce都会生成新的防抖函数，useCallback的空依赖会导致它一直返回第一次创建的函数，可能引发逻辑过期问题。

正确解决方案 #

方案1：用useMemo缓存防抖函数

useMemo适合缓存计算生成的函数（比如防抖函数），可以明确声明依赖，让ESLint识别内部用到的变量，同时避免每次渲染重新创建防抖函数：

export const Search: React.FC = () => {
  const dispatch = useDispatch();
  const [value, setValue] = React.useState<string>('');
  const inputRef = React.useRef<HTMLInputElement>(null);

  const onClickClear = () => {
    dispatch(setSearchValue(''));
    setValue('');
    inputRef.current?.focus();
  };

  // 用useMemo缓存防抖函数，添加dispatch到依赖数组
  const updateSearchValue = React.useMemo(() => {
    return debounce((str: string) => {
      dispatch(setSearchValue(str));
    }, 150);
  }, [dispatch]);

  // 组件卸载时取消防抖，避免内存泄漏（适配lodash等带cancel方法的debounce）
  React.useEffect(() => {
    return () => {
      updateSearchValue.cancel();
    };
  }, [updateSearchValue]);

  const onChangeInput = (event: React.ChangeEvent<HTMLInputElement>) => {
    setValue(event.target.value);
    updateSearchValue(event.target.value);
  };

  return (
    <div>
      <input value={value} onChange={onChangeInput} ref={inputRef} />
      <button onClick={onClickClear}>清除</button>
    </div>
  );
};

方案2：用useRef保存防抖函数（适合需要极致稳定函数引用的场景）

如果需要updateSearchValue的引用绝对稳定（比如作为其他Hook的依赖），可以用useRef存储防抖函数，再用useCallback包裹调用逻辑：

export const Search: React.FC = () => {
  const dispatch = useDispatch();
  const [value, setValue] = React.useState<string>('');
  const inputRef = React.useRef<HTMLInputElement>(null);
  // 用ref存储防抖函数，避免每次渲染重新创建
  const debouncedUpdateRef = React.useRef<((str: string) => void) | null>(null);

  // 仅在组件首次渲染时创建防抖函数
  if (!debouncedUpdateRef.current) {
    debouncedUpdateRef.current = debounce((str: string) => {
      dispatch(setSearchValue(str));
    }, 150);
  }

  const onClickClear = () => {
    dispatch(setSearchValue(''));
    setValue('');
    inputRef.current?.focus();
  };

  // useCallback包裹调用逻辑，依赖为空数组（仅依赖ref，ref引用稳定）
  const updateSearchValue = React.useCallback((str: string) => {
    debouncedUpdateRef.current?.(str);
  }, []);

  // 组件卸载时清理防抖
  React.useEffect(() => {
    return () => {
      debouncedUpdateRef.current?.cancel();
    };
  }, []);

  const onChangeInput = (event: React.ChangeEvent<HTMLInputElement>) => {
    setValue(event.target.value);
    updateSearchValue(event.target.value);
  };

  return (
    <div>
      <input value={value} onChange={onChangeInput} ref={inputRef} />
      <button onClick={onClickClear}>清除</button>
    </div>
  );
};

为什么之前用useMemo无效？ #

大概率是你没有正确添加依赖数组（比如漏掉了dispatch），或者没有理解useMemo的使用场景——它需要明确声明所有内部用到的外部变量，否则依然会触发ESLint报错，甚至导致逻辑过期。

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