解决React中useEffect定时器在频繁重渲染时冻结的问题

问题根源 #

频繁重渲染时，你的Use_intervaled_set_action钩子会因为useEffect依赖项变化反复执行清理和初始化逻辑，导致定时器被频繁销毁重建，看起来像是"冻结"；另外闭包陷阱会让定时器回调捕获到旧的状态/函数引用，进一步加剧异常。

修正方案 #

通过useRef保存定时器ID和最新回调，避免重渲染时丢失引用或捕获旧值；同时优化useEffect的依赖项，减少不必要的钩子触发。

修正后的自定义钩子代码 #

import { useEffect, useRef } from 'react';

function useIntervaledSetAction(callback, interval, immediate = false) {
  // 用ref保存最新的回调，避免闭包陷阱
  const callbackRef = useRef(callback);
  // 用ref保存定时器ID，确保重渲染时能正确清除
  const timerIdRef = useRef(null);

  // 每次渲染更新回调ref，保证定时器拿到的是最新逻辑
  useEffect(() => {
    callbackRef.current = callback;
  }, [callback]);

  useEffect(() => {
    // 定义定时器执行的函数，调用最新的回调
    const tick = () => {
      callbackRef.current();
    };

    // 立即执行一次（如果需要）
    if (immediate) {
      tick();
    }

    // 启动定时器
    timerIdRef.current = setInterval(tick, interval);

    // 清理函数：组件卸载或依赖变化时清除定时器
    return () => {
      if (timerIdRef.current) {
        clearInterval(timerIdRef.current);
        timerIdRef.current = null;
      }
    };
  }, [interval, immediate]); // 只有间隔时间或立即执行标志变化时才重启定时器
}

export default useIntervaledSetAction;

使用示例 #

import { useState } from 'react';
import useIntervaledSetAction from './useIntervaledSetAction';

function HighInteractionComponent() {
  const [inputValue, setInputValue] = useState('');
  const [timerCount, setTimerCount] = useState(0);

  // 使用自定义定时器钩子，每秒更新计数
  useIntervaledSetAction(() => {
    setTimerCount(prev => prev + 1);
  }, 1000);

  return (
    <div>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        placeholder="频繁输入试试..."
      />
      <p>定时器计数：{timerCount}</p>
    </div>
  );
}

export default HighInteractionComponent;

关键优化点解释 #

• callbackRef：每次渲染时更新ref的current值，确保定时器触发时调用的始终是最新的回调函数，解决闭包捕获旧值的问题。
• timerIdRef：保存定时器ID，避免重渲染时丢失引用，确保清理函数能正确清除定时器。
• useEffect依赖项：仅监听interval和immediate，避免组件因输入等状态变化频繁重启定时器。
• 清理函数：确保组件卸载或钩子重新执行时，旧的定时器被彻底清除，避免内存泄漏和多个定时器同时运行。

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