React报错：渲染组件时无法更新另一组件，useEffect应如何放置？

核心思路 #

把定时器的启动/停止逻辑从handleClick中剥离，通过useEffect监听active状态的变化来管理定时器，同时利用useEffect的清理函数确保组件卸载时或active状态改变时清理旧的定时器，避免内存泄漏。

修改后的代码 #

Component.js

import React, { useState, useRef, useEffect } from "react";

const Component = ({ state, setState }) => {
  const [active, setActive] = useState(false);
  const [number, setNumber] = useState(0);
  const id = useRef();

  // 定义定时器执行的逻辑
  const work = () => {
    setNumber((n) => {
      if (n > 2) {
        setState((s) => s + 1);
      }
      return n + 1;
    });
  };

  // 点击只负责切换active状态
  const handleClick = () => {
    setActive(prev => !prev);
  };

  // 监听active状态变化，管理定时器
  useEffect(() => {
    if (active) {
      // 启动定时器
      id.current = setInterval(work, 1000);
    } else {
      // 停止定时器
      if (id.current) {
        clearInterval(id.current);
      }
    }

    // 清理函数：组件卸载或active变化时清理定时器
    return () => {
      if (id.current) {
        clearInterval(id.current);
      }
    };
  }, [active]); // 依赖项：只有active变化时才执行这个effect

  return (
    <>
      <button onClick={handleClick}>{state}</button>
      <p>{number}</p>
    </>
  );
};

export default Component

关键说明 #

• 分离关注点：handleClick只负责切换active状态，定时器的管理交给useEffect，逻辑更清晰。
• 清理机制：useEffect的返回函数会在组件卸载或依赖项（active）变化时执行，确保旧的定时器被清理，避免内存泄漏和无效的定时器回调。
• 依赖项正确：useEffect的依赖数组只包含active，因为只有active的变化才需要启动/停止定时器；work函数内部使用状态更新的函数式写法（setNumber(n => ...)、setState(s => ...)），这种写法不依赖外部的number或state变量，总能获取到最新的状态值，因此不需要添加到依赖数组中。

原代码的潜在问题 #

原写法中work函数在handleClick内部定义，每次点击都会重新创建该函数，虽然当前逻辑能运行，但存在两个隐患：

1. 组件卸载时如果定时器仍在运行，没有自动清理逻辑，会导致内存泄漏。
2. 后续若state或其他依赖变化，无法自动调整定时器行为，而useEffect能更灵活地响应依赖变化。

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