Reactjs useEffect内部的RETURN语句在首次按钮点击事件中似乎无效的原因是什么

初始呈现时，toggleVar为FALSE，因此不会调用RandomComponent.在第一次单击按钮后，setInterval被调用并在后台运行，但为什么在useEffect退出时似乎没有立即触发返回？ 该leararInterval似乎在第二次单击按钮时被击中，这很奇怪，因为第二次单击按钮会将toggleVar设置为False，这将阻止RandomComponent(及其内部的useEffect)被触发？

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;

以下是我对这一系列事件的理解:

1. 如果toggleVar为FALSE，则不会命中RandomComponent；

2. 如果toggleVar为真(第一次点击按钮)，则触发RandomComponent

   • 将运行Use Effect
   • 将显示‘Hello from useEffect’
   • SetInterval将被触发，并且"这将被显示..."将每隔1秒显示一次
   • 立即返回将运行leararInterval的函数，从而停止setInterval函数
   • 将显示"已清除间隔"
   • ‘Hello There’将会显示‘

3. 如果toggleVar为FALSE(第二次单击按钮)，则不会命中RandomComponent

我知道实际yields 与我预期的不一样，但这就是为什么提出这个问题.这是一个自上而下的代码执行，那么返回语句有什么特别之处呢？