React 18循环挂载卸载引发内存上涨问题的修复求助

问题场景 #

开发的UI SDK在WebView中全天候运行，通过挂载React组件展示UI，关闭时卸载组件。用户反馈长期运行后UI无法交互，经Chrome DevTools检测，循环执行挂载卸载操作时内存持续上涨，确认存在内存泄漏。

泄漏原因分析 #

提供的复现代码中，每次调用render函数都会新建一个ReactDOM.createRoot实例。React 18的Root实例包含内部调度器、状态管理等核心资源，反复创建后，即使调用了root.unmount()，部分关联资源也无法被垃圾回收器及时清理，导致内存持续积累。

修复方案 #

核心思路是复用同一个Root实例，避免重复创建重量级的Root对象，具体修改如下：

修改后的代码 #

import React from "react";
import ReactDOM from "react-dom/client";

const App = () => {
  return (
    <>
      <button>render</button>
      <button>unmount</button>
    </>
  );
};

const dom = document.getElementById("root");
// 全局只创建一次Root实例，复用它完成所有渲染/卸载操作
const root = ReactDOM.createRoot(dom);

const render = () => {
  root.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );

  setTimeout(() => {
    // 通过render(null)卸载组件，释放组件相关内存
    root.render(null);
  }, 100);
};

window.__begain = () => setInterval(render, 2000);

关键说明 #

1. 复用Root实例：Root实例是React的核心载体，重复创建会产生大量无法回收的内部资源，全局仅初始化一次即可满足反复挂载卸载的需求。
2. 用render(null)替代重复unmount：root.render(null)会卸载当前所有组件并清理其关联资源，同时Root实例可继续用于后续渲染；若调用root.unmount()，该Root实例将被永久销毁，无法再次复用，反而会增加资源重建的开销。

额外检查点 #

除了Root实例的问题，还需排查组件内部是否存在内存泄漏：

• 组件中是否有未清理的定时器、事件监听、网络订阅？需在useEffect的清理函数中取消这些资源。
• 是否存在全局变量缓存组件实例或状态？这类引用会阻止GC回收组件对象。

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