React项目集成ag-grid出现flushSync警告，请求排查根源

结论先行 #

这个flushSync警告来自AG Grid组件内部，和你的业务代码无关。

原因分析 #

从警告的调用栈可以明确看到：报错的起点是RowContainerComp（路径指向ag-grid-react.js），说明AG Grid的React组件在内部实现中，违反了React的渲染规则——在React的生命周期/渲染过程中直接调用了flushSync，而React不允许在正在渲染时执行强制刷新操作。

这种问题大多出现在AG Grid版本与React 18+不兼容的场景：React 18引入了并发渲染机制，旧版AG Grid的React适配器没有适配这个变化，内部的状态更新逻辑使用了不符合新规范的flushSync调用。

排查与解决步骤 #

• 优先升级AG Grid版本：官方在后续的稳定版本中修复了大量React 18兼容问题，建议将ag-grid-community和ag-grid-react升级到最新稳定版，这是最彻底的解决方式。
• 检查业务代码（排除确认）：你的代码中没有手动调用flushSync的逻辑，useEffect中的showLoadingOverlay/hideOverlay是在渲染完成后的副作用阶段执行，符合React规范，不会触发该警告。
• 临时规避方案（若无法立即升级）：如果暂时不能升级版本，可以尝试将触发AG Grid API的逻辑包裹在微任务中，避免同步触发组件内部的状态更新：

useEffect(() => {
  if (gridRef.current && gridRef.current.api) {
    queueMicrotask(() => {
      loading 
        ? gridRef.current.api.showLoadingOverlay() 
        : gridRef.current.api.hideOverlay();
    });
  }
}, [loading]);

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