如何在React函数式组件中延迟重渲染？

你的核心诉求是让组件在用户输入停止2秒后再重渲染，而不是每次按键都触发更新。当前代码的问题在于：text作为React state，只要它的状态更新（哪怕是输入时的每一次按键），组件就会立刻重渲染——useEffect只是延迟了text2的更新，但text变化本身已经触发了组件重渲染，这和你想要的效果不符。

正确的解决方案：使用防抖（Debounce）控制state更新时机 #

我们需要把setText的操作做防抖处理，让它在用户停止输入2秒后才执行，这样text状态只会在2秒后更新一次，组件自然也就只会重渲染一次。下面是两种实现方式：

方式1：用useRef存储定时器ID（更直观）

function App() {
  const [text, setText] = React.useState('');
  const [text2, setText2] = React.useState(0);
  // 用useRef保存定时器ID，避免每次渲染丢失引用
  const timeoutRef = React.useRef(null);

  const handleInputChange = (e) => {
    // 每次输入都清除之前的定时器，确保只有最后一次输入生效
    if (timeoutRef.current) {
      clearTimeout(timeoutRef.current);
    }
    // 设置新定时器，2秒后更新text状态
    timeoutRef.current = setTimeout(() => {
      setText(e.target.value);
    }, 2000);
  };

  // 组件卸载时清除定时器，防止内存泄漏
  React.useEffect(() => {
    return () => {
      if (timeoutRef.current) {
        clearTimeout(timeoutRef.current);
      }
    };
  }, []);

  // 当text最终更新时，再更新text2（按需使用）
  React.useEffect(() => {
    if (text) { // 避免初始空值触发更新
      setText2(prev => prev + 1);
    }
  }, [text]);

  return (
    <>
      <form>
        <label>
          Name:
          <input
            type="text"
            name="name"
            onChange={handleInputChange}
          />
        </label>
      </form>
      <div>输入内容：{text}</div>
      <div>重渲染计数：{text2}</div>
    </>
  );
}

方式2：用useCallback+useMemo封装防抖函数

function App() {
  const [text, setText] = React.useState('');
  const [text2, setText2] = React.useState(0);

  // 封装防抖函数，仅在组件初始化时创建一次
  const debouncedSetText = React.useCallback(
    React.useMemo(() => {
      let timeoutId;
      return (value) => {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(() => {
          setText(value);
        }, 2000);
      };
    }, []),
    []
  );

  React.useEffect(() => {
    if (text) {
      setText2(prev => prev + 1);
    }
  }, [text]);

  return (
    <>
      <form>
        <label>
          Name:
          <input
            type="text"
            name="name"
            onChange={(e) => debouncedSetText(e.target.value)}
          />
        </label>
      </form>
      <div>输入内容：{text}</div>
      <div>重渲染计数：{text2}</div>
    </>
  );
}

关于你提到的let变量问题 #

React的组件重渲染机制是依赖state或props的变化触发的，普通的let变量是组件函数内部的局部变量，它的变化不会通知React去更新组件，自然也不会被useEffect监听——这是React的核心渲染逻辑决定的，所以用let替代useState是行不通的。

效果验证 #

现在当你在输入框中连续输入时，组件不会立刻重渲染；只有当你停止输入2秒后，text状态才会更新，组件才会触发一次重渲染，同时text2也会跟着更新一次，完美实现了你想要的“每2秒最多重渲染一次”的效果。

内容的提问来源于stack exchange，提问作者Jason Rich Darmawan