为何useEffect中的return清理函数在首次点击按钮时未生效？

问题描述 #

初始渲染时toggleVar为false，RandomComponent不会被渲染。首次点击按钮后，setInterval在后台持续运行，但useEffect执行完毕后返回的清理函数并未立即触发；直到第二次点击按钮（此时toggleVar被设为false，RandomComponent不再渲染），clearInterval才执行，这是为什么？想搞清楚这个return语句的特殊之处。

示例代码 #

import {useEffect, useState} from 'react';

const CleanupFunction = () => {
  const [toggleVar, setToggle] = useState(false);
  return (
  <div>
    <button onClick={() => setToggle(!toggleVar)}>
     Component Display
    </button>
    {toggleVar && <RandomComponent />}
  </div>
  );
};

 const RandomComponent = () => {
   useEffect(() => {
      console.log('Hello from useEffect');
      const intId = setInterval(() => {
        console.log('This is going to be displayed every 1 second');
      }, 1000);
      return () => {
        clearInterval(intId);
        console.log('Cleared interval');
      };
   },[]);
   
   return <h1>Hello there </h1>;
  };

export default CleanupFunction;

你的理解偏差 #

你之前对流程的理解有误，错误点在于：

• 当toggleVar变为true、RandomComponent首次渲染时，useEffect执行后返回的清理函数不会立即调用，而是被React保存起来，等待特定时机触发。

正确的执行流程 #

1. 初始渲染：toggleVar为false，RandomComponent不渲染，无任何定时器相关操作。
2. 首次点击按钮：toggleVar变为true，RandomComponent开始渲染：
   • 组件挂载完成后，执行useEffect回调：打印Hello from useEffect，启动每秒打印的定时器，同时返回清理函数（这个函数不会马上执行）。
   • 定时器持续在后台运行，每秒输出日志，组件渲染出Hello there。
3. 第二次点击按钮：toggleVar变为false，RandomComponent被卸载：
   • React会触发之前useEffect返回的清理函数，执行clearInterval(intId)停止定时器，同时打印Cleared interval。
   • 组件从DOM中移除，不再渲染。

关于return清理函数的核心说明 #

useEffect中return的函数是清理函数，它的触发时机只有两个：

• 当组件即将被卸载时（比如这里RandomComponent因为toggleVar变为false被移除）；
• 当该useEffect的依赖项发生变化，导致useEffect需要重新执行时（这里依赖项是空数组[]，所以只有卸载时才会触发）。

它的作用是清理组件挂载期间创建的副作用（比如定时器、订阅、DOM事件监听等），防止内存泄漏，而不是在useEffect执行完毕后立刻执行。

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