feat(theme): use createRoot to render app

3lang3 · May 25, 2022 · 631002a · 631002a
1 parent 3071ac1
commit 631002a
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 10 deletions.
diff --git a/packages/theme/hooks/useCodeSandbox.ts b/packages/theme/hooks/useCodeSandbox.ts
@@ -102,15 +102,14 @@ function getCSBData(
 **/
 
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client'
 ${CSSDeps.map(({ css }) => `import '${css}';`).join('\n')}
 import App from './App';
 ${opts.extra ? `${opts.extra}\n` : '\n'}
 
-ReactDOM.render(
-  <App />,
-  document.querySelector('#root'),
-);`,
+const container = document.querySelector('#root')
+const root = createRoot(container)
+root.render(<App />)`,
   };
 
   // append other imported local files

diff --git a/packages/theme/hooks/useStackBlitz.ts b/packages/theme/hooks/useStackBlitz.ts
@@ -69,15 +69,14 @@ function getStackblitzData(
 **/
 
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client'
 ${CSSDeps.map(({ css }) => `import '${css}';`).join('\n')}
 import App from './App';
 ${opts.extra ? `${opts.extra}\n` : '\n'}
 
-ReactDOM.render(
-  <App />,
-  document.querySelector('#root'),
-);`,
+const container = document.querySelector('#root')
+const root = createRoot(container)
+root.render(<App />)`,
   };
 
   // append other imported local files