React使用debounce实现搜索功能时报无效Hook调用错误如何解决

触发报错的核心原因是违反了React Hook的调用规则，具体问题如下：

• React明确要求所有Hook必须在函数组件的最顶层作用域调用，禁止在事件回调函数、条件判断、循环等非顶层作用域中调用。你当前将自定义Hook useDebounce 放在输入事件回调 onInputChange 内部执行，直接触发了Hook规则校验报错。
• 额外逻辑错误：你调用useDebounce时直接执行了handleSearchPropsChange(xxx)，相当于每次输入都会立即执行该函数，没有将它作为回调传入防抖逻辑，防抖功能完全不生效。

1. 首先将useDebounce的调用移到函数组件的顶层作用域，传入要防抖执行的逻辑，拿到稳定的防抖函数实例：

// 放在函数组件最顶层，不要嵌套在任何回调、条件、循环内部
const debouncedUpdateProps = useDebounce((searchInput) => {
  handleSearchPropsChange({
    filter: {
      searchInput,
      dateRange: {
        start,
        end
      }
    }
  })
}, 1000)

2. 修改输入事件回调逻辑，直接调用上述生成的防抖函数即可：

const onInputChange = (e) => {
  const searchInput = e.target.value;
  debouncedUpdateProps(searchInput);
}

3. （可选优化）如果handleSearchPropsChange、start、end是可变依赖，可优化自定义Hook避免闭包问题：

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

export function useDebounce(callback = () => {}, time = 500, deps = []) {
  // 依赖变化时重新生成防抖函数
  return useMemo(() => debounce(callback, time), deps);
}

调用时传入对应依赖即可：

const debouncedUpdateProps = useDebounce((searchInput) => {
  handleSearchPropsChange({
    filter: {
      searchInput,
      dateRange: {
        start,
        end
      }
    }
  })
}, 1000, [handleSearchPropsChange, start, end])

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