React AG Grid问题：组件卸载后仍存在内存堆积

1. 强制清理AG Grid内部引用 #

仅通过React状态清空rowData无法彻底释放AG Grid持有的内部缓存，必须调用官方API主动清理：

• 在组件卸载或数据刷新前，先通过gridApi清空数据并销毁实例：

useEffect(() => {
  return () => {
    if (gridApi) {
      gridApi.setRowData([]); // 清空表格数据
      gridApi.destroy(); // 彻底销毁AG Grid实例，释放内部资源
    }
  };
}, [gridApi]);

• 刷新数据集时，先执行上述清理操作，再加载新数据，避免新旧数据引用叠加。

2. 修复未清理的事件监听与闭包泄漏 #

AG Grid的回调（如cellRenderer、cellClicked）若使用匿名函数或未正确移除监听，会形成闭包持有组件上下文，导致内存泄漏：

• 用useCallback包裹回调函数，保持引用稳定：

const handleCellClick = useCallback((params) => {
  // 处理点击逻辑
}, []);

• 组件卸载时移除所有AG Grid事件监听：

useEffect(() => {
  if (!gridApi) return;
  gridApi.addEventListener('cellClicked', handleCellClick);
  return () => {
    gridApi.removeEventListener('cellClicked', handleCellClick);
  };
}, [gridApi, handleCellClick]);

3. 优化分页数据加载逻辑 #

即使采用分页，全量加载15万条数据到前端仍会占用大量内存，建议：

• 改为服务端分页：仅请求当前页的数据，而非一次性加载全量数据，从根源减少内存占用
• 若必须前端分页，刷新时先销毁旧的AG Grid实例，再重新初始化表格加载新数据，避免旧数据残留

4. 确保状态更新的引用正确性 #

React依赖数组引用变化触发重渲染，若直接修改原数组而非创建新数组，会导致AG Grid持有旧数据引用：

// 错误：修改原数组，引用未变
rowData.length = 0;
setRowData(rowData);

// 正确：创建新数组，触发AG Grid更新
setRowData([]);
// 加载新数据时也传递新数组
setRowData([...fetchedData]);

5. 调试定位泄漏点 #

• 使用Chrome DevTools的Memory标签，分别在加载数据前、清空数据后拍摄堆快照，对比查找未被释放的AG Grid对象（如RowNode、GridApi实例）
• 启用AG Grid的debug模式，查看内部日志排查异常引用：

<AgGridReact
  debug={true}
  // 其他配置项
/>

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