useEffect中设置的无限循环在组件卸载后仍运行该如何解决？

问题根源 #

1. 函数调用顺序错误：原代码中animate()在函数定义前就被调用，由于async函数属于表达式不会被提升，会直接触发ReferenceError。
2. 无终止条件的死循环：while(true)是彻底的无限循环，组件卸载后没有任何机制能中断它，导致内存泄漏和控制台报错。
3. 缺失有效清理逻辑：没有设置控制异步操作和循环的标记，无法中断等待中的setTimeout和后续循环。

解决方案 #

核心是用可修改的挂载状态标记控制循环终止，同时确保setTimeout能被清理，避免无效异步操作继续执行。

完整修复代码

import { useEffect, useRef } from 'react';

function delay(time, shouldCancel) {
  return new Promise((resolve) => {
    const timerId = setTimeout(() => {
      // 仅在未取消时执行resolve
      if (!shouldCancel.current) resolve();
    }, time);
    // 返回清理函数，用于清除未触发的定时器
    return () => clearTimeout(timerId);
  });
}

function YourComponent({ dates }) {
  // 用ref保存挂载状态，更新不会触发重渲染
  const isMounted = useRef(true);

  useEffect(() => {
    const animate = async () => {
      let i = 0;
      // 初始延迟前先检查挂载状态
      if (!isMounted.current) return;
      await delay(5000, isMounted);
      
      // 用挂载状态作为循环判断条件
      while (isMounted.current) {
        console.log("setting");        
        await delay(1500, isMounted);
        // 等待结束后再次检查，避免执行无效逻辑
        if (!isMounted.current) break;
        
        if (i === dates.length - 1) {
          i = 0;
        } else {
          i++;
        }
      }     
    };

    animate();

    // 组件卸载时标记为未挂载，终止循环
    return () => {
      isMounted.current = false;
    };
  }, [dates]); // 将dates加入依赖数组，避免闭包捕获旧值

  return <div>你的组件内容</div>;
}

关键说明 #

• isMounted.current作为循环的开关，组件卸载时设为false，循环会在下一次检查时终止。
• delay函数接收shouldCancel ref，定时器触发前先检查状态，避免无效的Promise resolve。
• 每次await delay后额外检查挂载状态，确保即使定时器已触发，也不会执行后续过时逻辑。
• 把dates加入useEffect依赖数组，防止闭包捕获旧的dates值导致逻辑错误。

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