替代useEffect清理函数的方案？解决Lighthouse unload弃用警告

核心实现代码 #

使用useRef存储定时器ID，避免闭包导致的清理失效问题，同时确保组件卸载时正确清理定时器：

import { useEffect, useRef, useState } from 'react';

function AutoClosePopup() {
  const [isVisible, setIsVisible] = useState(true);
  const timerRef = useRef(null);

  useEffect(() => {
    // 启动3秒自动关闭的定时器
    timerRef.current = setTimeout(() => {
      setIsVisible(false);
    }, 3000);

    // 组件卸载时执行清理逻辑
    return () => {
      clearTimeout(timerRef.current);
    };
  }, []);

  return isVisible ? <div className="popup">自动关闭弹窗内容</div> : null;
}

关于Lighthouse警告的说明 #

你原代码中useEffect的清理函数是组件卸载时触发，和页面unload事件完全无关，出现警告大概率是Lighthouse的误判，或是你的代码中存在其他绑定window.unload/beforeunload事件的逻辑。

进阶优化（适配动态显示状态） #

如果弹窗的显示状态由外部props或内部状态动态控制，需要在useEffect的依赖项中加入对应状态，确保状态变更时重新管理定时器：

useEffect(() => {
  if (isVisible) {
    timerRef.current = setTimeout(() => {
      setIsVisible(false);
    }, 3000);
  }

  return () => {
    clearTimeout(timerRef.current);
  };
}, [isVisible]); // 依赖isVisible状态，状态变化时重新执行逻辑

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