React组件重新挂载后setInterval后台持续运行数量累加如何解决？

• 你通过条件渲染{state? <Component/> : '' }控制组件显隐时，state为false会直接触发组件卸载而非视觉隐藏，每次state切回true组件都会完整走一遍挂载流程。
• 子组件内部的useEffect依赖数组为空，仅会在组件挂载时执行一次，创建新的setInterval计时器。但你没有编写useEffect的清理逻辑，组件卸载时计时器不会被自动回收，会一直在后台运行。
• 每一轮组件卸载-重新挂载的流程都会生成新的计时器，旧计时器没有被销毁，自然会出现数量持续累加的问题。

方案1：给useEffect添加计时器清理逻辑（推荐） #

直接在子组件的useEffect中返回清理函数，组件卸载时会自动执行该函数销毁计时器，从根源避免累加问题。
代码示例：

// 子组件内部的useEffect逻辑
useEffect(() => {
  const timerId = setInterval(() => {
    // 你原本的计时器业务逻辑
  }, 1000)

  // 新增：返回清理函数，组件卸载时自动触发
  return () => clearInterval(timerId)
}, [])

该方案适配绝大多数场景，不管组件是否会被卸载，都不会出现计时器泄露问题。

方案2：改用CSS控制显隐，避免组件卸载 #

如果你的业务需要保留组件显隐切换时的内部状态，不想让组件卸载，可以把条件渲染替换为display样式控制：

// 父组件渲染逻辑
return (
   <div>
      <Component style={{display: state ? 'block' : 'none'}} />
   </div>
)

这种方案下组件始终不会被卸载，useEffect只会在首次挂载时执行一次，计时器也只会创建一个，不会出现累加问题。

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