React中useEffect清理无效：内存泄漏与UI不即时更新问题排查

问题现象 #

尝试基于另一个组件数据库调用的结果更新UI，有时生效多数时候失效，失效时触发警告：

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

目前UI仅在页面刷新后正常更新，无法通过useEffect即时生效，怀疑存在竞态条件。

已尝试的代码 #

状态管理组件代码 #

const [isPatched, setIsPatched] = useState<boolean>(false);

useEffect(() => {
    x.Log ? setPatched(true) : setPatched(false);
    return () => {
      setIsPatched(false);
    };
  }, []);

const setPatched = (patched: boolean) => {
    setIsPatched(patched);
};

数据库调用组件代码 #

useEffect(() => {
    if (disabled === true) {
      const handle = setTimeout(() => setDisabled(false), 7000);
      return () => clearTimeout(handle);
    }
  }, [disabled]);

function handleClick() {
   [...]
    const updatePatchedX = async (id: string) => {
      // 检查数据库中是否已存在patched的x
      const content = await services.xData.getxContent(id);
      const xToUpdated = content?.p[0] as T;

      if (!xToUpdated.log) {
        // 添加log属性标记为patched并存入DB
        xToUpdated.log = [
          { cId: cId ?? "", uId: uId, appliedAt: Date.now() },
        ];

        if (content) {
          await services.xData
            .updateOTxBook(id, content, uId)
            .then(() => {
              console.log("done");
              setPatched(true);
              setDisabled(true);
            });
        }
      }
    };

    updatePatchedX(notebookID);
}

核心问题与解决步骤 #

1. 竞态条件与组件卸载后更新状态 #

异步请求updatePatchedX如果在组件卸载后才完成，调用setPatched(true)就会触发内存泄漏警告。解决方式是添加组件挂载标记，避免无效的状态更新：

// 先在组件内定义挂载状态标记
const isMountedRef = useRef(true);
useEffect(() => {
  return () => {
    isMountedRef.current = false;
  };
}, []);

function handleClick() {
    const updatePatchedX = async (id: string) => {
      const content = await services.xData.getxContent(id);
      // 组件已卸载，直接终止后续操作
      if (!isMountedRef.current) return;

      const xToUpdated = content?.p[0] as T;
      if (!xToUpdated.log) {
        xToUpdated.log = [
          { cId: cId ?? "", uId: uId, appliedAt: Date.now() },
        ];

        if (content) {
          await services.xData.updateOTxBook(id, content, uId);
          // 再次检查组件状态
          if (!isMountedRef.current) return;
          console.log("done");
          setPatched(true);
          setDisabled(true);
        }
      }
    };

    updatePatchedX(notebookID);
}

2. useEffect依赖缺失导致UI不更新 #

第一个组件的useEffect依赖是空数组，只会在组件挂载时执行一次，后续x.Log变化不会触发重新计算，导致UI无法即时更新。解决方式是补全依赖：

const [isPatched, setIsPatched] = useState<boolean>(false);

useEffect(() => {
    // 简化状态更新逻辑
    setIsPatched(!!x.Log);
    // 组件卸载后无需更新状态，移除原清理函数中的setIsPatched
  }, [x.Log]); // 将x.Log加入依赖数组，确保状态随数据源变化

// 无需额外封装setPatched，直接用setIsPatched即可

3. 跨组件状态同步不规范 #

直接调用其他组件的状态更新函数不符合React单向数据流规范，容易导致状态不同步。建议：

• 若为父子组件：将isPatched状态提升至共同父组件，通过props传递状态和更新函数给子组件；
• 若为跨层级/兄弟组件：使用Context或轻量状态管理库（如Zustand）同步isPatched状态，统一状态更新入口。

总结 #

1. 给异步操作添加挂载状态标记，避免组件卸载后更新状态；
2. 补全useEffect依赖数组，确保状态随数据源实时更新；
3. 遵循React单向数据流规范，通过props或状态管理工具同步跨组件状态。

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