Vite部署React项目时useInterval遇static状态疑似内存泄漏排查

你的问题并非Vite的已知问题，而是代码存在几处逻辑和Hooks使用的疏漏，以下是具体分析和修复方案：

1. 定时器回调的逻辑错误 #

updateRemainingCharge函数中，处理down方向的分支写错了，导致无论点击up还是down，charge都会持续增加：

function updateRemainingCharge() {
  setCharge((prev) => {
    if (direction === 'up') return prev + 1;
    // 错误：应该是 prev - 1
    if (direction === 'down') return prev + 1;

    return prev;
  });
}

修复后：

function updateRemainingCharge() {
  setCharge((prev) => {
    if (direction === 'up') return prev + 1;
    if (direction === 'down') return prev - 1;

    return prev;
  });
}

2. useEffect缺少依赖数组导致不必要的重复执行 #

useInterval中的第一个useEffect没有指定依赖数组，会在每次组件渲染时都执行，造成不必要的savedCallback赋值操作：

useEffect(() => {
  if (delay === null) return;
  savedCallback.current = callback;
});

修复后添加依赖数组，确保仅在callback或delay变化时执行：

useEffect(() => {
  if (delay === null) return;
  savedCallback.current = callback;
}, [callback, delay]);

3. static状态下未停止定时器 #

当前代码中，点击static按钮后，delay仍为5，定时器不会被清除，会持续执行回调（虽然此时charge不再变化）。如果需要在static状态下停止定时器，需将useInterval的delay参数改为动态值：

useInterval(updateRemainingCharge, direction === 'static' ? null : 5);

这样当direction变为static时，delay会变为null，useInterval中的第二个useEffect会执行清除定时器的操作。

总结 #

上述修复后，点击static按钮时定时器会停止，charge不再变化，也不会出现疑似内存泄漏的现象。

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