React onChange绑定防抖函数无限次调用的原因及修复方法

• 定时器API误用：防抖实现中错误使用了循环定时器setInterval，替代了防抖逻辑需要的单次延迟定时器setTimeout。setInterval会在达到延迟时间后，每隔设定的阈值重复执行回调，且代码中调用的clearTimeout无法清除setInterval返回的循环定时器ID，一旦定时器创建就会无限执行回调。
• 防抖状态跨渲染周期丢失：React函数组件每次触发重渲染时，都会从头执行组件函数内的所有代码，直接在组件顶层调用debouncing生成事件处理函数的写法，会在每次重渲染时创建全新的防抖实例，每个实例闭包内的timer变量都是独立的初始值，既无法清除上一次触发时创建的定时器，还会生成多个并行的定时器，导致回调重复触发。

• 替换错误的定时器API：将防抖逻辑中的setInterval改为setTimeout，匹配防抖「停止输入后延迟指定时间执行一次」的核心逻辑。
• 持久化防抖状态：使用useRef存储定时器ID和生成的防抖处理函数，保证防抖的闭包状态在组件多次重渲染之间不会被重置，始终使用同一个防抖实例。
• 补充卸载清理逻辑：组件卸载时清除未执行的定时器，避免内存泄漏。

修复后完整代码：

import { useRef, useEffect } from "react";
import "./styles.css";

export default function App() {
  const input_ref = useRef(null);
  // 跨渲染周期存储定时器ID
  const timerRef = useRef(null);

  // 修正后的防抖逻辑
  const debouncing = (callback, threshold) => {
    return function (...args) {
      const context = this;
      // 每次触发先清除上一次的定时器
      if (timerRef.current) clearTimeout(timerRef.current);
      timerRef.current = setTimeout(() => {
        timerRef.current = null;
        callback.apply(context, args);
      }, threshold);
    };
  };

  // 持久化防抖处理函数实例，避免重渲染时重复创建
  const search_data = useRef(
    debouncing(() => {
      console.log(input_ref.current.value);
    }, 300)
  ).current;

  // 组件卸载时清理残留定时器
  useEffect(() => {
    return () => {
      if (timerRef.current) clearTimeout(timerRef.current);
    };
  }, []);

  return (
    <div className="App">
      <input
        type="text"
        name="searchBox"
        placeholder="search"
        ref={input_ref}
        onChange={search_data}
      />
    </div>
  );
}

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