Use react18 in playground

.eslintrc.js

@@ -23,13 +23,18 @@
  */
 module.exports = {
   root: true,
-  plugins: ['unused-imports', 'eslint-plugin-tsdoc', 'import'],
-  settings: {},
+  plugins: ['unused-imports', 'eslint-plugin-tsdoc', 'import', 'react'],
+  settings: {
+    react: {
+      version: '18.2',
+    },
+  },
   extends: [],
   rules: {
     'unused-imports/no-unused-imports': 'warn',
     'tsdoc/syntax': 'warn',
     'no-debugger': 'error',
+    'react/no-deprecated': 'error',
 
     'no-restricted-imports': [
       'error',

examples/basic-dom/index.tsx

@@ -1,12 +1,11 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import ReactDOM from 'react-dom/client'
 import studio from '@theatre/studio'
 import {getProject} from '@theatre/core'
 import {Scene} from './Scene'
 
 studio.initialize()
 
-ReactDOM.render(
+ReactDOM.createRoot(document.getElementById('root')!).render(
   <Scene project={getProject('Sample project')} />,
-  document.getElementById('root'),
 )

packages/playground/src/index.tsx

@@ -1,5 +1,5 @@
 import {PlaygroundPage} from './home/PlaygroundPage'
-import ReactDom from 'react-dom'
+import ReactDom from 'react-dom/client'
 import React from 'react'
 
 // like [{'./shared/hello/index.html': () => import('./shared/hello/index.html')}]
@@ -16,7 +16,6 @@ const groups = (Object.keys(modules) as string[]).reduce((acc, path) => {
   return acc
 }, {} as {[groupName: string]: string[]})
 
-ReactDom.render(
+ReactDom.createRoot(document.getElementById('root')!).render(
   <PlaygroundPage groups={groups} />,
-  document.getElementById('root'),
 )

packages/playground/src/shared/camera/index.tsx

@@ -7,4 +7,4 @@ import extension from '@theatre/r3f/dist/extension'
 studio.extend(extension)
 studio.initialize()
 
-ReactDOM.createRoot(document.getElementById('root')).render(<App />)
+ReactDOM.createRoot(document.getElementById('root')!).render(<App />)

packages/playground/src/shared/custom-editable-components/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import ReactDOM from 'react-dom/client'
 import App from './App'
 import studio from '@theatre/studio'
 import extension from '@theatre/r3f/dist/extension'
@@ -7,4 +7,4 @@ import extension from '@theatre/r3f/dist/extension'
 studio.extend(extension)
 studio.initialize()
 
-ReactDOM.render(<App />, document.getElementById('root'))
+ReactDOM.createRoot(document.getElementById('root')!).render(<App />)

packages/playground/src/shared/custom-raf-driver/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import ReactDOM from 'react-dom/client'
 import App from './App'
 import studio from '@theatre/studio'
 import extension from '@theatre/r3f/dist/extension'
@@ -15,4 +15,6 @@ studio.initialize({
   __experimental_rafDriver: rafDriver,
 })
 
-ReactDOM.render(<App rafDriver={rafDriver} />, document.getElementById('root'))
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <App rafDriver={rafDriver} />,
+)

packages/playground/src/shared/dom-basic/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import ReactDOM from 'react-dom/client'
 import studio from '@theatre/studio'
 import {getProject} from '@theatre/core'
 import {Scene} from './Scene'
@@ -9,7 +9,6 @@ import {Scene} from './Scene'
 
 studio.initialize()
 
-ReactDOM.render(
+ReactDOM.createRoot(document.getElementById('root')!).render(
   <Scene project={getProject('Sample project')} />,
-  document.getElementById('root'),
 )

packages/playground/src/shared/dom/index.tsx

@@ -12,7 +12,7 @@ import {Scene} from './Scene'
 
 studio.initialize()
 
-ReactDOM.createRoot(document.getElementById('root')).render(
+ReactDOM.createRoot(document.getElementById('root')!).render(
   <Scene
     project={getProject('Sample project', {
       // experiments: {

packages/playground/src/shared/hello-world-extension-dataverse/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import ReactDOM from 'react-dom/client'
 import App from './App'
 import type {ToolsetConfig} from '@theatre/studio'
 import studio from '@theatre/studio'
@@ -70,4 +70,4 @@ studio.extend({
 })
 studio.initialize()
 
-ReactDOM.render(<App />, document.getElementById('root'))
+ReactDOM.createRoot(document.getElementById('root')!).render(<App />)

packages/playground/src/shared/hello-world-extension-using-sheet-object/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import ReactDOM from 'react-dom/client'
 import App from './App'
 import type {ISheetObject} from '@theatre/core'
 import {onChange, types, val} from '@theatre/core'
@@ -60,4 +60,4 @@ studio.extend({
 })
 studio.initialize()
 
-ReactDOM.render(<App />, document.getElementById('root'))
+ReactDOM.createRoot(document.getElementById('root')!).render(<App />)

packages/playground/src/shared/hello-world-extension/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import ReactDOM from 'react-dom/client'
 import App from './App'
 import studio from '@theatre/studio'
 import extension from '@theatre/r3f/dist/extension'
@@ -92,4 +92,4 @@ studio.extend({
 })
 studio.initialize()
 
-ReactDOM.render(<App />, document.getElementById('root'))
+ReactDOM.createRoot(document.getElementById('root')!).render(<App />)

packages/playground/src/shared/image/index.tsx

@@ -5,7 +5,7 @@
 import {getProject, types} from '@theatre/core'
 import studio from '@theatre/studio'
 import React, {useEffect, useState} from 'react'
-import {render} from 'react-dom'
+import {render} from 'react-dom/client'
 import styled from 'styled-components'
 
 const project = getProject('Image type playground', {

packages/playground/src/shared/instances/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import ReactDOM from 'react-dom/client'
 import App from './App'
 import studio from '@theatre/studio'
 import extension from '@theatre/r3f/dist/extension'
@@ -7,9 +7,8 @@ import extension from '@theatre/r3f/dist/extension'
 studio.extend(extension)
 studio.initialize()
 
-ReactDOM.render(
+ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-  document.getElementById('root'),
 )

packages/playground/src/shared/notifications/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import ReactDOM from 'react-dom/client'
 import studio from '@theatre/studio'
 import {getProject, notify} from '@theatre/core'
 import {Scene} from './Scene'
@@ -24,7 +24,7 @@ void getProject('Sample project').ready.then(() => {
   )
 })
 
-ReactDOM.render(
+ReactDOM.createRoot(document.getElementById('root')!).render(
   <Scene
     project={getProject('Sample project', {
       // experiments: {
@@ -36,5 +36,4 @@ ReactDOM.render(
       // },
     })}
   />,
-  document.getElementById('root'),
 )

packages/playground/src/shared/r3f-rocket/index.tsx

@@ -7,4 +7,4 @@ import extension from '@theatre/r3f/dist/extension'
 studio.extend(extension)
 studio.initialize()
 
-ReactDOM.createRoot(document.getElementById('root')).render(<App />)
+ReactDOM.createRoot(document.getElementById('root')!).render(<App />)

packages/playground/src/shared/remote/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import ReactDOM from 'react-dom/client'
 import studio from '@theatre/studio'
 import {getProject} from '@theatre/core'
 import {Scene} from './Scene'
@@ -9,4 +9,4 @@ const project = getProject('Sample project')
 studio.initialize()
 RemoteController(project)
 
-ReactDOM.render(<Scene />, document.getElementById('root'))
+ReactDOM.createRoot(document.getElementById('root')!).render(<Scene />)

packages/playground/src/shared/theatric/index.tsx

@@ -1,5 +1,5 @@
 import {button, initialize, types, useControls} from 'theatric'
-import {render} from 'react-dom'
+import {render} from 'react-dom/client'
 import React, {useState} from 'react'
 import state from './state.json'
 

packages/playground/src/shared/three-basic/index.tsx

@@ -1,12 +1,11 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import ReactDOM from 'react-dom/client'
 import studio from '@theatre/studio'
 import {getProject} from '@theatre/core'
 import ThreeScene from './ThreeScene'
 
 studio.initialize()
 
-ReactDOM.render(
+ReactDOM.createRoot(document.getElementById('root')!).render(
   <ThreeScene project={getProject('Three Basic')} />,
-  document.getElementById('root'),
 )

packages/playground/src/shared/turtle/index.tsx

@@ -3,7 +3,7 @@
  * can be tweaked and animated.
  */
 import React, {useMemo, useState} from 'react'
-import {render} from 'react-dom'
+import {render} from 'react-dom/client'
 import {getProject} from '@theatre/core'
 import type {ITurtle} from './turtle'
 import TurtleRenderer from './TurtleRenderer'

packages/playground/src/tests/r3f-dynamic-tree/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import ReactDOM from 'react-dom/client'
 import App from './App'
 import studio from '@theatre/studio'
 import extension from '@theatre/r3f/dist/extension'
@@ -7,4 +7,4 @@ import extension from '@theatre/r3f/dist/extension'
 studio.extend(extension)
 studio.initialize({usePersistentStorage: false})
 
-ReactDOM.render(<App />, document.getElementById('root'))
+ReactDOM.createRoot(document.getElementById('root')!).render(<App />)

packages/playground/src/tests/r3f-stress-test/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import ReactDOM from 'react-dom/client'
 import App from './App'
 import studio from '@theatre/studio'
 import extension from '@theatre/r3f/dist/extension'
@@ -10,7 +10,7 @@ const studioPrivate = getStudio()
 studio.extend(extension)
 studio.initialize()
 
-ReactDOM.render(<App />, document.getElementById('root'))
+ReactDOM.createRoot(document.getElementById('root')!).render(<App />)
 
 const raf = studioPrivate.ticker
 

packages/r3f/src/extension/index.ts

@@ -146,11 +146,11 @@ const r3fExtension: IExtension = {
     {
       class: 'snapshot',
       mount: ({paneId, node}) => {
-        ReactDOM.createRoot(node).render(
-          React.createElement(SnapshotEditor, {paneId}),
-        )
+        const root = ReactDOM.createRoot(node)
+
+        root.render(React.createElement(SnapshotEditor, {paneId}))
         function unmount() {
-          ReactDOM.unmountComponentAtNode(node)
+          root.unmount()
         }
         return unmount
       },