From 4b972f2e23e2d4609d9955c4d1d42972f368f5b9 Mon Sep 17 00:00:00 2001
From: simeng-li <simeng@silverhand.io>
Date: Mon, 8 Aug 2022 17:31:37 +0800
Subject: [PATCH] fix(ui,console,demo-app): update react render method (#1750)

update react root render method
---
 packages/console/src/index.tsx  | 5 +++--
 packages/demo-app/src/index.tsx | 5 +++--
 packages/ui/src/index.tsx       | 5 +++--
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/packages/console/src/index.tsx b/packages/console/src/index.tsx
index 7227c3f1b..8d87a3b4f 100644
--- a/packages/console/src/index.tsx
+++ b/packages/console/src/index.tsx
@@ -1,8 +1,9 @@
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import ReactModal from 'react-modal';
 
 import App from './App';
 
 const app = document.querySelector('#app');
+const root = app && createRoot(app);
 ReactModal.setAppElement('#app');
-ReactDOM.render(<App />, app);
+root?.render(<App />);
diff --git a/packages/demo-app/src/index.tsx b/packages/demo-app/src/index.tsx
index 8b71713e2..166d1f277 100644
--- a/packages/demo-app/src/index.tsx
+++ b/packages/demo-app/src/index.tsx
@@ -1,8 +1,9 @@
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 // eslint-disable-next-line import/no-unassigned-import
 import '@logto/shared/declaration';
 
 import App from './App';
 
 const app = document.querySelector('#app');
-ReactDOM.render(<App />, app);
+const root = app && createRoot(app);
+root?.render(<App />);
diff --git a/packages/ui/src/index.tsx b/packages/ui/src/index.tsx
index 7d442778b..2fff32634 100644
--- a/packages/ui/src/index.tsx
+++ b/packages/ui/src/index.tsx
@@ -1,6 +1,7 @@
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
 import App from './App';
 
 const app = document.querySelector('#app');
-ReactDOM.render(<App />, app);
+const root = app && createRoot(app);
+root?.render(<App />);