React中实现Debounce遇问题：输入触发多次而非单次调用

你的防抖理解完全正确，问题出在React组件的渲染机制上。

问题原因 #

每次调用setSearchVal更新state时，组件会触发重新渲染，此时你定义的debouncedChange会被重新创建——也就是每次渲染都会执行一遍debounce()函数，生成一个全新的闭包，每个闭包里的timeoutId都是独立的。这就导致你输入每一个字符时，都是在调用一个新的防抖函数，之前的定时器根本没被清除，所以每个输入值都会在延迟2秒后触发回调。

解决方案 #

有两种常用的修复方式，都能确保防抖函数的引用和定时器ID在组件的多次渲染间保持一致：

方案1：用useCallback固定防抖函数引用

import { useState, useCallback } from 'react';

function debounce(cb, delay) {
  let timeoutId;
  return function (...args) {
    if (timeoutId) {
      clearTimeout(timeoutId);
    }
    timeoutId = setTimeout(() => {
      cb(...args);
    }, delay);
  };
}

export default function App() {
  const [searchVal, setSearchVal] = useState('');
  const [debounceVal, setDebounceVal] = useState('');

  // 用useCallback包裹防抖函数，空依赖数组确保它只在组件挂载时创建一次
  const debouncedChange = useCallback(debounce((inputValue) => {
    console.log('Debounced:', inputValue);
    setDebounceVal(inputValue);
  }, 2000), []);

  const handleChange = (e) => {
    const inputValue = e.target.value;
    setSearchVal(inputValue);
    debouncedChange(inputValue);
  };

  return (
    <div className="App">
      <h1>Debounce</h1>

      <div className="container">
        <div className="search-input">
          <input type="text" value={searchVal} onChange={handleChange} />
        </div>

        <div className="search-data">{debounceVal}</div>
      </div>
    </div>
  );
}

方案2：直接在组件内用useRef保存定时器ID

这种方式无需外部防抖函数，逻辑更直观：

import { useState, useRef } from 'react';

export default function App() {
  const [searchVal, setSearchVal] = useState('');
  const [debounceVal, setDebounceVal] = useState('');
  // 用useRef保存定时器ID，跨渲染周期共享引用
  const timeoutIdRef = useRef(null);

  const handleChange = (e) => {
    const inputValue = e.target.value;
    setSearchVal(inputValue);
    
    // 清除上一次的定时器
    if (timeoutIdRef.current) {
      clearTimeout(timeoutIdRef.current);
    }
    
    // 设置新的定时器，仅在最后一次输入后2秒执行
    timeoutIdRef.current = setTimeout(() => {
      console.log('Debounced:', inputValue);
      setDebounceVal(inputValue);
    }, 2000);
  };

  return (
    <div className="App">
      <h1>Debounce</h1>

      <div className="container">
        <div className="search-input">
          <input type="text" value={searchVal} onChange={handleChange} />
        </div>

        <div className="search-data">{debounceVal}</div>
      </div>
    </div>
  );
}

两种方案都能实现预期效果：在连续输入2秒后，仅触发一次回调，输出最终的输入值。

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