fix: react 18 render async renderImperatively ref allways null (#1069)

Co-authored-by: Yang <yangpan@zhongan.com>
ZhongAnTech · Mar 20, 2023 · 9d9461a · 9d9461a
1 parent d7a6f8d
commit 9d9461a
Showing 1 changed file with 5 additions and 1 deletion.
diff --git a/packages/zarm/src/utils/dom/render.ts b/packages/zarm/src/utils/dom/render.ts
@@ -18,10 +18,12 @@ const fullClone = {
 const { version, render: reactRender, unmountComponentAtNode } = fullClone;
 
 let createRoot: CreateRoot;
+let flushSync;
 try {
  const mainVersion = Number((version || '').split('.')[0]);
  if (mainVersion >= 18 && fullClone.createRoot) {
  createRoot = fullClone.createRoot;
+ flushSync = fullClone.flushSync;
  }
 } catch {
  // Do nothing;
@@ -53,7 +55,9 @@ function modernRender(node: React.ReactElement, container: ContainerType) {
  toggleWarning(true);
  const root = container[MARK] || createRoot(container);
  toggleWarning(false);
- root.render(node);
+ flushSync(() => {
+ root.render(node);
+ })
  container[MARK] = root;
 }