Use createRoot

extension/src/browser/extension/devpanel/index.tsx

@@ -1,5 +1,5 @@
 import React, { CSSProperties } from 'react';
-import { render, unmountComponentAtNode } from 'react-dom';
+import { createRoot, Root } from 'react-dom/client';
 import { Provider } from 'react-redux';
 import { Persistor } from 'redux-persist';
 import { REMOVE_INSTANCE, StoreAction } from '@redux-devtools/app';
@@ -27,23 +27,21 @@ let naTimeout: NodeJS.Timeout;
 
 const isChrome = navigator.userAgent.indexOf('Firefox') === -1;
 
-function renderDevTools() {
+function renderDevTools(root: Root) {
-  const node = document.getElementById('root');
+  root.unmount();
-  unmountComponentAtNode(node!);
   clearTimeout(naTimeout);
   ({ store, persistor } = configureStore(position, bgConnection));
-  render(
+  root.render(
     <Provider store={store}>
       <PersistGate loading={null} persistor={persistor}>
         <App position={position} />
       </PersistGate>
-    </Provider>,
+    </Provider>
-    node
   );
   rendered = true;
 }
 
-function renderNA() {
+function renderNA(root: Root) {
   if (rendered === false) return;
   rendered = false;
   naTimeout = setTimeout(() => {
@@ -76,32 +74,31 @@ function renderNA() {
           );
         }
 
-        const node = document.getElementById('root');
+        root.unmount();
-        unmountComponentAtNode(node!);
+        root.render(message);
-        render(message, node);
         store = undefined;
       });
     } else {
-      const node = document.getElementById('root');
+      root.unmount();
-      unmountComponentAtNode(node!);
+      root.render(message);
-      render(message, node);
       store = undefined;
     }
   }, 3500);
 }
 
 function init(id: number) {
-  renderNA();
+  const root = createRoot(document.getElementById('root')!);
+  renderNA(root);
   bgConnection = chrome.runtime.connect({
     name: id ? id.toString() : undefined,
   });
   bgConnection.onMessage.addListener(
     <S, A extends Action<unknown>>(message: PanelMessage<S, A>) => {
       if (message.type === 'NA') {
-        if (message.id === id) renderNA();
+        if (message.id === id) renderNA(root);
         else store!.dispatch({ type: REMOVE_INSTANCE, id: message.id });
       } else {
-        if (!rendered) renderDevTools();
+        if (!rendered) renderDevTools(root);
         store!.dispatch(message);
       }
     }

extension/src/browser/extension/options/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import OptionsComponent from './Options';
 import { Options } from './syncOptions';
 
@@ -13,10 +13,8 @@ chrome.runtime.getBackgroundPage((background) => {
   };
 
   const renderOptions = (options: Options) => {
-    render(
+    const root = createRoot(document.getElementById('root')!);
-      <OptionsComponent options={options} saveOption={saveOption} />,
+    root.render(<OptionsComponent options={options} saveOption={saveOption} />);
-      document.getElementById('root')
-    );
   };
 
   syncOptions.subscribe(renderOptions);

extension/src/browser/extension/window/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { Provider } from 'react-redux';
 import { PersistGate } from 'redux-persist/integration/react';
 import { UPDATE_STATE } from '@redux-devtools/app';
@@ -25,13 +25,13 @@ chrome.runtime.getBackgroundPage((window) => {
   bg.onMessage.addListener(update);
   update();
 
-  render(
+  const root = createRoot(document.getElementById('root')!);
+  root.render(
     <Provider store={localStore}>
       <PersistGate loading={null} persistor={persistor}>
         <App position={position} />
       </PersistGate>
-    </Provider>,
+    </Provider>
-    document.getElementById('root')
   );
 });
 

extension/src/browser/extension/window/remote.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { Root } from '@redux-devtools/app';
 
 import '../../views/remote.pug';
@@ -15,7 +15,8 @@ chrome.storage.local.get(
   },
   (options) => {
     const AppAsAny = Root as any;
-    render(
+    const root = createRoot(document.getElementById('root')!);
+    root.render(
       <AppAsAny
         selectMonitor={options['select-monitor']}
         testTemplates={options['test-templates']}
@@ -30,8 +31,7 @@ chrome.storage.local.get(
               }
             : undefined
         }
-      />,
+      />
-      document.getElementById('root')
     );
   }
 );

packages/react-dock/demo/src/index.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import App from './App';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+const root = ReactDOM.createRoot(document.getElementById('root')!);
+root.render(<App />);

packages/react-json-tree/examples/src/index.tsx

@@ -1,5 +1,6 @@
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import React from 'react';
 import App from './App';
 
-render(<App />, document.getElementById('root'));
+const root = createRoot(document.getElementById('root')!);
+root.render(<App />);

packages/redux-devtools-app/README.md

@@ -16,10 +16,11 @@ Also it's a react component you can use to build amazing monitor applications li
 
 ```js
 import React from 'react';
-import ReactDom from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import { Root } from '@redux-devtools/app';
 
-ReactDom.render(<Root />, document.getElementById('root'));
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(<Root />);
 ```
 
 ### Parameters

packages/redux-devtools-app/demo/index.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { Root } from '../src';
 
-render(<Root />, document.getElementById('root'));
+const root = createRoot(document.getElementById('root')!);
+root.render(<Root />);
 
 if (module.hot) {
   // https://github.com/webpack/webpack/issues/418#issuecomment-53398056

packages/redux-devtools-cli/app/index.html

@@ -31,16 +31,15 @@
     <script src="/redux-devtools-app.min.js"></script>
     <script src="/port.js"></script>
     <script>
-      ReactDOM.render(
+      const container = document.querySelector('#root');
-        React.createElement(ReduxDevToolsApp, {
+      const element = React.createElement(ReduxDevToolsApp, {
         socketOptions: {
           hostname: location.hostname,
           port: reduxDevToolsPort,
           autoReconnect: true,
         },
-        }),
+      })
-        document.querySelector('#root')
+      ReactDOM.createRoot(container).render(element);
-      );
     </script>
   </body>
 </html>

packages/redux-devtools-inspector-monitor-test-tab/demo/src/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { Container } from '@redux-devtools/ui';
 import { Provider } from 'react-redux';
 import {
@@ -50,7 +50,8 @@ const enhancer = compose(
 
 const store = createStore(rootReducer, enhancer);
 
-render(
+const root = createRoot(document.getElementById('root')!);
+root.render(
   <Provider store={store}>
     <BrowserRouter>
       <Container
@@ -66,6 +67,5 @@ render(
         {!useDevtoolsExtension && <ConnectedDevTools />}
       </Container>
     </BrowserRouter>
-  </Provider>,
+  </Provider>
-  document.getElementById('root')
 );

packages/redux-devtools-inspector-monitor/demo/src/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { Provider } from 'react-redux';
 import {
   createStore,
@@ -49,7 +49,8 @@ const enhancer = compose(
 
 const store = createStore(rootReducer, enhancer);
 
-render(
+const root = createRoot(document.getElementById('root')!);
+root.render(
   <Provider store={store}>
     <BrowserRouter>
       <Routes>
@@ -57,6 +58,5 @@ render(
       </Routes>
       {!useDevtoolsExtension && <ConnectedDevTools />}
     </BrowserRouter>
-  </Provider>,
+  </Provider>
-  document.getElementById('root')
 );

packages/redux-devtools-rtk-query-monitor/demo/src/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import { Provider } from 'react-redux';
 import { ChakraProvider } from '@chakra-ui/react';
 import './index.css';
@@ -11,8 +11,8 @@ import { worker } from './mocks/browser';
 
 function renderApp() {
   const rootElement = document.getElementById('root');
-
+  const root = ReactDOM.createRoot(rootElement!);
-  ReactDOM.render(
+  root.render(
     <Provider store={store}>
       <ChakraProvider>
         <BrowserRouter>
@@ -20,8 +20,7 @@ function renderApp() {
           <DevTools />
         </BrowserRouter>
       </ChakraProvider>
-    </Provider>,
+    </Provider>
-    rootElement
   );
 }
 

packages/redux-devtools-slider-monitor/examples/todomvc/src/index.tsx

@@ -1,10 +1,11 @@
 import 'todomvc-app-css/index.css';
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import configureStore from './store/configureStore';
 import Root from './containers/Root';
 
 const store = configureStore();
 
 const rootEl = document.getElementById('root');
-ReactDOM.render(<Root store={store} />, rootEl);
+const root = ReactDOM.createRoot(rootEl!);
+root.render(<Root store={store} />);

packages/redux-devtools/examples/counter/src/index.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import configureStore from './store/configureStore';
 import Root from './containers/Root';
 
 const store = configureStore();
 
-render(<Root store={store} />, document.getElementById('root'));
+const root = createRoot(document.getElementById('root')!);
+root.render(<Root store={store} />);

packages/redux-devtools/examples/todomvc/src/index.tsx

@@ -1,9 +1,10 @@
 import 'todomvc-app-css/index.css';
 import React from 'react';
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import configureStore from './store/configureStore';
 import Root from './containers/Root';
 
 const store = configureStore();
 
-render(<Root store={store} />, document.getElementById('root'));
+const root = createRoot(document.getElementById('root')!);
+root.render(<Root store={store} />);