fix(deps): update react (major) (#1165)

* fix(deps): update react

* Fix

* Use createRoot

* Update tests

* Format

* Fix test

Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: Nathan Bierema <nbierema@gmail.com>

extension/package.json

@@ -41,10 +41,10 @@
     "jsan": "^3.1.14",
     "localforage": "^1.10.0",
     "lodash": "^4.17.21",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
     "react-icons": "^4.4.0",
-    "react-is": "^17.0.2",
+    "react-is": "^18.1.0",
     "react-json-tree": "^0.17.0",
     "react-redux": "^8.0.2",
     "redux": "^4.2.0",
@@ -58,11 +58,11 @@
     "@babel/preset-typescript": "^7.17.12",
     "@babel/register": "^7.17.7",
     "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^12.1.5",
+    "@testing-library/react": "^13.3.0",
     "@types/chrome": "^0.0.188",
     "@types/lodash": "^4.14.182",
-    "@types/react": "^17.0.45",
-    "@types/react-dom": "^17.0.17",
+    "@types/react": "^18.0.12",
+    "@types/react-dom": "^18.0.5",
     "@types/styled-components": "^5.1.25",
     "babel-loader": "^8.2.5",
     "bestzip": "^2.2.1",

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() {
-  const node = document.getElementById('root');
-  unmountComponentAtNode(node!);
+function renderDevTools(root: Root) {
+  root.unmount();
   clearTimeout(naTimeout);
   ({ store, persistor } = configureStore(position, bgConnection));
-  render(
+  root.render(
     <Provider store={store}>
       <PersistGate loading={null} persistor={persistor}>
         <App position={position} />
       </PersistGate>
-    </Provider>,
-    node
+    </Provider>
   );
   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');
-        unmountComponentAtNode(node!);
-        render(message, node);
+        root.unmount();
+        root.render(message);
         store = undefined;
       });
     } else {
-      const node = document.getElementById('root');
-      unmountComponentAtNode(node!);
-      render(message, node);
+      root.unmount();
+      root.render(message);
       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(
-      <OptionsComponent options={options} saveOption={saveOption} />,
-      document.getElementById('root')
-    );
+    const root = createRoot(document.getElementById('root')!);
+    root.render(<OptionsComponent options={options} saveOption={saveOption} />);
   };
 
   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>,
-    document.getElementById('root')
+    </Provider>
   );
 });
 

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')
+      />
     );
   }
 );

package.json

@@ -42,6 +42,12 @@
   "pnpm": {
     "overrides": {
       "@babel/highlight>chalk": "Methuselah96/chalk#v2-without-process"
+    },
+    "peerDependencyRules": {
+      "allowedVersions": {
+        "react": "18",
+        "react-dom": "18"
+      }
     }
   }
 }

packages/react-dock/demo/package.json

@@ -10,12 +10,12 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "react": "^17.0.2",
+    "react": "^18.1.0",
     "react-bootstrap": "^2.4.0",
     "react-dock": "^0.6.0",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.1.0",
     "react-icons": "^4.4.0",
-    "react-is": "^17.0.2",
+    "react-is": "^18.1.0",
     "styled-components": "^5.3.5"
   },
   "devDependencies": {
@@ -24,8 +24,8 @@
     "@babel/preset-react": "^7.17.12",
     "@babel/preset-typescript": "^7.17.12",
     "@types/node": "^16.11.38",
-    "@types/react": "^17.0.45",
-    "@types/react-dom": "^17.0.17",
+    "@types/react": "^18.0.12",
+    "@types/react-dom": "^18.0.5",
     "@types/styled-components": "^5.1.25",
     "@typescript-eslint/eslint-plugin": "^5.27.0",
     "@typescript-eslint/parser": "^5.27.0",

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-dock/package.json

@@ -55,8 +55,8 @@
     "@babel/preset-typescript": "^7.17.12",
     "@types/jest": "^27.5.2",
     "@types/lodash.debounce": "^4.0.7",
-    "@types/react": "^17.0.45",
-    "@types/react-test-renderer": "^17.0.2",
+    "@types/react": "^18.0.12",
+    "@types/react-test-renderer": "^18.0.0",
     "@typescript-eslint/eslint-plugin": "^5.27.0",
     "@typescript-eslint/parser": "^5.27.0",
     "eslint": "^8.17.0",
@@ -65,8 +65,8 @@
     "eslint-plugin-react": "^7.30.0",
     "eslint-plugin-react-hooks": "^4.5.0",
     "jest": "^27.5.1",
-    "react": "^17.0.2",
-    "react-test-renderer": "^17.0.2",
+    "react": "^18.1.0",
+    "react-test-renderer": "^18.1.0",
     "rimraf": "^3.0.2",
     "ts-jest": "^27.1.5",
     "typescript": "~4.7.3"

packages/react-json-tree/examples/package.json

@@ -20,9 +20,9 @@
   },
   "dependencies": {
     "immutable": "^4.1.0",
-    "react": "^17.0.2",
+    "react": "^18.1.0",
     "react-base16-styling": "^0.9.1",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.1.0",
     "react-json-tree": "^0.17.0"
   },
   "devDependencies": {
@@ -31,8 +31,8 @@
     "@babel/preset-react": "^7.17.12",
     "@babel/preset-typescript": "^7.17.12",
     "@types/node": "^16.11.38",
-    "@types/react": "^17.0.45",
-    "@types/react-dom": "^17.0.17",
+    "@types/react": "^18.0.12",
+    "@types/react-dom": "^18.0.5",
     "@typescript-eslint/eslint-plugin": "^5.27.0",
     "@typescript-eslint/parser": "^5.27.0",
     "babel-loader": "^8.2.5",

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/react-json-tree/package.json

@@ -64,8 +64,8 @@
     "@rollup/plugin-node-resolve": "^13.3.0",
     "@types/jest": "^27.5.2",
     "@types/node": "^16.11.38",
-    "@types/react": "^17.0.45",
-    "@types/react-test-renderer": "^17.0.2",
+    "@types/react": "^18.0.12",
+    "@types/react-test-renderer": "^18.0.0",
     "@typescript-eslint/eslint-plugin": "^5.27.0",
     "@typescript-eslint/parser": "^5.27.0",
     "eslint": "^8.17.0",
@@ -74,8 +74,8 @@
     "eslint-plugin-react": "^7.30.0",
     "eslint-plugin-react-hooks": "^4.5.0",
     "jest": "^27.5.1",
-    "react": "^17.0.2",
-    "react-test-renderer": "^17.0.2",
+    "react": "^18.1.0",
+    "react-test-renderer": "^18.1.0",
     "rimraf": "^3.0.2",
     "rollup": "^2.75.5",
     "rollup-plugin-terser": "^7.0.2",

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-app/package.json

@@ -60,7 +60,7 @@
     "lodash": "^4.17.21",
     "prop-types": "^15.8.1",
     "react-icons": "^4.4.0",
-    "react-is": "^17.0.2",
+    "react-is": "^18.1.0",
     "react-redux": "^8.0.2",
     "redux": "^4.2.0",
     "redux-persist": "^6.0.0",
@@ -76,14 +76,14 @@
     "@babel/preset-typescript": "^7.17.12",
     "@rjsf/core": "^4.2.0",
     "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^12.1.5",
+    "@testing-library/react": "^13.3.0",
     "@types/jest": "^27.5.2",
     "@types/jsan": "^3.1.2",
     "@types/json-schema": "^7.0.11",
     "@types/lodash": "^4.14.182",
     "@types/node": "^16.11.38",
-    "@types/react": "^17.0.45",
-    "@types/react-dom": "^17.0.17",
+    "@types/react": "^18.0.12",
+    "@types/react-dom": "^18.0.5",
     "@types/socketcluster-client": "^13.0.5",
     "@types/styled-components": "^5.1.25",
     "@types/testing-library__jest-dom": "^5.14.3",
@@ -103,8 +103,8 @@
     "html-webpack-plugin": "^5.5.0",
     "jest": "^27.5.1",
     "path-browserify": "^1.0.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
     "rimraf": "^3.0.2",
     "style-loader": "^3.3.1",
     "styled-components": "^5.3.5",

packages/redux-devtools-chart-monitor/package.json

@@ -56,14 +56,14 @@
     "@babel/preset-react": "^7.17.12",
     "@babel/preset-typescript": "^7.17.12",
     "@redux-devtools/core": "^3.13.1",
-    "@types/react": "^17.0.45",
+    "@types/react": "^18.0.12",
     "@typescript-eslint/eslint-plugin": "^5.27.0",
     "@typescript-eslint/parser": "^5.27.0",
     "eslint": "^8.17.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-react": "^7.30.0",
     "eslint-plugin-react-hooks": "^4.5.0",
-    "react": "^17.0.2",
+    "react": "^18.1.0",
     "redux": "^4.2.0",
     "rimraf": "^3.0.2",
     "typescript": "~4.7.3"

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(
-        React.createElement(ReduxDevToolsApp, {
+      const container = document.querySelector('#root');
+      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-cli/package.json

@@ -41,7 +41,7 @@
   },
   "dependencies": {
     "@redux-devtools/app": "^2.1.3",
-    "@types/react": "^17.0.45",
+    "@types/react": "^18.0.12",
     "apollo-server-express": "^3.8.2",
     "body-parser": "^1.20.0",
     "chalk": "^4.1.2",
@@ -56,9 +56,9 @@
     "minimist": "^1.2.6",
     "morgan": "^1.10.0",
     "open": "^8.4.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-is": "^17.0.2",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
+    "react-is": "^18.1.0",
     "semver": "^7.3.7",
     "socketcluster": "^14.4.2",
     "sqlite3": "^5.0.8",

packages/redux-devtools-dock-monitor/package.json

@@ -57,14 +57,14 @@
     "@babel/preset-typescript": "^7.17.12",
     "@redux-devtools/core": "^3.13.1",
     "@types/parse-key": "^0.2.0",
-    "@types/react": "^17.0.45",
+    "@types/react": "^18.0.12",
     "@typescript-eslint/eslint-plugin": "^5.27.0",
     "@typescript-eslint/parser": "^5.27.0",
     "eslint": "^8.17.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-react": "^7.30.0",
     "eslint-plugin-react-hooks": "^4.5.0",
-    "react": "^17.0.2",
+    "react": "^18.1.0",
     "redux": "^4.2.0",
     "rimraf": "^3.0.2",
     "typescript": "~4.7.3"

packages/redux-devtools-inspector-monitor-test-tab/demo/package.json

@@ -17,9 +17,9 @@
     "@redux-devtools/ui": "^1.3.0",
     "immutable": "^4.1.0",
     "lodash.shuffle": "^4.2.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-is": "^17.0.2",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
+    "react-is": "^18.1.0",
     "react-redux": "^8.0.2",
     "react-router-dom": "^6.3.0",
     "redux": "^4.2.0",
@@ -33,8 +33,8 @@
     "@babel/preset-typescript": "^7.17.12",
     "@types/lodash.shuffle": "^4.2.7",
     "@types/node": "^16.11.38",
-    "@types/react": "^17.0.45",
-    "@types/react-dom": "^17.0.17",
+    "@types/react": "^18.0.12",
+    "@types/react-dom": "^18.0.5",
     "@types/redux-logger": "^3.0.9",
     "@types/styled-components": "^5.1.25",
     "@types/webpack-env": "^1.17.0",

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>,
-  document.getElementById('root')
+  </Provider>
 );

packages/redux-devtools-inspector-monitor-test-tab/package.json

@@ -64,12 +64,12 @@
     "@babel/preset-typescript": "^7.17.12",
     "@redux-devtools/core": "^3.13.0",
     "@redux-devtools/inspector-monitor": "^3.0.0",
-    "@testing-library/react": "^12.1.5",
+    "@testing-library/react": "^13.3.0",
     "@types/es6template": "^1.0.0",
     "@types/jest": "^27.5.2",
     "@types/jsan": "^3.1.2",
     "@types/object-path": "^0.11.1",
-    "@types/react": "^17.0.45",
+    "@types/react": "^18.0.12",
     "@types/simple-diff": "^1.6.1",
     "@typescript-eslint/eslint-plugin": "^5.27.0",
     "@typescript-eslint/parser": "^5.27.0",
@@ -79,8 +79,8 @@
     "eslint-plugin-react": "^7.30.0",
     "eslint-plugin-react-hooks": "^4.5.0",
     "jest": "^27.5.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
     "redux": "^4.2.0",
     "rimraf": "^3.0.2",
     "ts-jest": "^27.1.5",

packages/redux-devtools-inspector-monitor-trace-tab/package.json

@@ -49,13 +49,13 @@
     "@babel/preset-typescript": "^7.17.12",
     "@redux-devtools/core": "^3.13.0",
     "@redux-devtools/inspector-monitor": "^3.0.0",
-    "@testing-library/react": "^12.1.5",
+    "@testing-library/react": "^13.3.0",
     "@types/babel__code-frame": "^7.0.3",
     "@types/html-entities": "^1.3.4",
     "@types/jest": "^27.5.2",
     "@types/node": "^16.11.38",
     "@types/path-browserify": "^1.0.0",
-    "@types/react": "^17.0.45",
+    "@types/react": "^18.0.12",
     "@types/redux-devtools-themes": "^1.0.0",
     "@types/source-map": "0.5.2",
     "@typescript-eslint/eslint-plugin": "^5.27.0",
@@ -66,9 +66,9 @@
     "eslint-plugin-react": "^7.30.0",
     "eslint-plugin-react-hooks": "^4.5.0",
     "jest": "^27.5.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-test-renderer": "^17.0.2",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
+    "react-test-renderer": "^18.1.0",
     "redux": "^4.2.0",
     "rimraf": "^3.0.2",
     "ts-jest": "^27.1.5",

packages/redux-devtools-inspector-monitor-trace-tab/test/StackTraceTab.spec.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import { TraceTab } from '../src/StackTraceTab';
 
 const actions = {
@@ -42,7 +42,10 @@ describe('StackTraceTab component', () => {
     const { container } = render(
       <TraceTabAsAny actions={actions} action={actions[2].action} />
     );
-    await screen.findByTestId('stack-trace');
+    const stackTraceDiv = await screen.findByTestId('stack-trace');
+    await waitFor(() =>
+      expect(stackTraceDiv.querySelector('div')).toBeTruthy()
+    );
     expect(container.firstChild).toMatchSnapshot();
   });
 });

packages/redux-devtools-inspector-monitor/demo/package.json

@@ -16,9 +16,9 @@
     "base16": "^1.0.0",
     "immutable": "^4.1.0",
     "lodash.shuffle": "^4.2.0",
-    "react": "^17.0.2",
+    "react": "^18.1.0",
     "react-bootstrap": "^2.4.0",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.1.0",
     "react-redux": "^8.0.2",
     "react-router-dom": "^6.3.0",
     "redux": "^4.2.0",
@@ -32,8 +32,8 @@
     "@types/base16": "^1.0.2",
     "@types/lodash.shuffle": "^4.2.7",
     "@types/node": "^16.11.38",
-    "@types/react": "^17.0.45",
-    "@types/react-dom": "^17.0.17",
+    "@types/react": "^18.0.12",
+    "@types/react-dom": "^18.0.5",
     "@types/redux-logger": "^3.0.9",
     "@types/webpack-env": "^1.17.0",
     "@typescript-eslint/eslint-plugin": "^5.27.0",

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>,
-  document.getElementById('root')
+  </Provider>
 );

packages/redux-devtools-inspector-monitor/package.json

@@ -66,7 +66,7 @@
     "@types/hex-rgba": "^1.0.1",
     "@types/history": "^4.7.11",
     "@types/lodash.debounce": "^4.0.7",
-    "@types/react": "^17.0.45",
+    "@types/react": "^18.0.12",
     "@types/react-dragula": "^1.1.0",
     "@types/redux-devtools-themes": "^1.0.0",
     "@typescript-eslint/eslint-plugin": "^5.27.0",
@@ -75,7 +75,7 @@
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-react": "^7.30.0",
     "eslint-plugin-react-hooks": "^4.5.0",
-    "react": "^17.0.2",
+    "react": "^18.1.0",
     "redux": "^4.2.0",
     "rimraf": "^3.0.2",
     "typescript": "~4.7.3"

packages/redux-devtools-log-monitor/package.json

@@ -59,14 +59,14 @@
     "@babel/preset-react": "^7.17.12",
     "@babel/preset-typescript": "^7.17.12",
     "@redux-devtools/core": "^3.13.1",
-    "@types/react": "^17.0.45",
+    "@types/react": "^18.0.12",
     "@typescript-eslint/eslint-plugin": "^5.27.0",
     "@typescript-eslint/parser": "^5.27.0",
     "eslint": "^8.17.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-react": "^7.30.0",
     "eslint-plugin-react-hooks": "^4.5.0",
-    "react": "^17.0.2",
+    "react": "^18.1.0",
     "redux": "^4.2.0",
     "rimraf": "^3.0.2",
     "typescript": "~4.7.3"

packages/redux-devtools-rtk-query-monitor/demo/package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.3",
-    "@chakra-ui/react": "^1.8.8",
+    "@chakra-ui/react": "^2.1.2",
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
     "@mswjs/data": "^0.10.1",
@@ -21,10 +21,10 @@
     "@reduxjs/toolkit": "^1.8.2",
     "framer-motion": "^6.3.10",
     "msw": "^0.42.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
     "react-icons": "^4.4.0",
-    "react-is": "^17.0.2",
+    "react-is": "^18.1.0",
     "react-redux": "^8.0.2",
     "react-router-dom": "^6.3.0",
     "styled-components": "^5.3.5"
@@ -37,8 +37,8 @@
     "@babel/preset-typescript": "^7.17.12",
     "@types/copy-webpack-plugin": "^8.0.1",
     "@types/node": "^16.11.38",
-    "@types/react": "^17.0.45",
-    "@types/react-dom": "^17.0.17",
+    "@types/react": "^18.0.12",
+    "@types/react-dom": "^18.0.5",
     "@types/styled-components": "^5.1.25",
     "@typescript-eslint/eslint-plugin": "^5.27.0",
     "@typescript-eslint/parser": "^5.27.0",

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');
-
-  ReactDOM.render(
+  const root = ReactDOM.createRoot(rootElement!);
+  root.render(
     <Provider store={store}>
       <ChakraProvider>
         <BrowserRouter>
@@ -20,8 +20,7 @@ function renderApp() {
           <DevTools />
         </BrowserRouter>
       </ChakraProvider>
-    </Provider>,
-    rootElement
+    </Provider>
   );
 }
 

packages/redux-devtools-rtk-query-monitor/package.json

@@ -70,14 +70,14 @@
     "@reduxjs/toolkit": "^1.8.2",
     "@types/hex-rgba": "^1.0.1",
     "@types/lodash.debounce": "^4.0.7",
-    "@types/react": "^17.0.45",
+    "@types/react": "^18.0.12",
     "@typescript-eslint/eslint-plugin": "^5.27.0",
     "@typescript-eslint/parser": "^5.27.0",
     "eslint": "^8.17.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-react": "^7.30.0",
     "eslint-plugin-react-hooks": "^4.5.0",
-    "react": "^17.0.2",
+    "react": "^18.1.0",
     "redux": "^4.2.0",
     "rimraf": "^3.0.2",
     "typescript": "~4.7.3"

packages/redux-devtools-slider-monitor/examples/todomvc/package.json

@@ -21,9 +21,9 @@
     "@redux-devtools/slider-monitor": "^4.0.0",
     "classnames": "^2.3.1",
     "prop-types": "^15.8.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-is": "^17.0.2",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
+    "react-is": "^18.1.0",
     "react-redux": "^8.0.2",
     "redux": "^4.2.0",
     "styled-components": "^5.3.5",
@@ -37,8 +37,8 @@
     "@types/classnames": "^2.3.1",
     "@types/node": "^16.11.38",
     "@types/prop-types": "^15.7.5",
-    "@types/react": "^17.0.45",
-    "@types/react-dom": "^17.0.17",
+    "@types/react": "^18.0.12",
+    "@types/react-dom": "^18.0.5",
     "@types/styled-components": "^5.1.25",
     "@types/webpack-env": "^1.17.0",
     "@typescript-eslint/eslint-plugin": "^5.27.0",

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-slider-monitor/package.json

@@ -50,14 +50,14 @@
     "@redux-devtools/core": "^3.13.1",
     "@rollup/plugin-babel": "^5.3.1",
     "@types/node": "^16.11.38",
-    "@types/react": "^17.0.45",
+    "@types/react": "^18.0.12",
     "@typescript-eslint/eslint-plugin": "^5.27.0",
     "@typescript-eslint/parser": "^5.27.0",
     "eslint": "^8.17.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-react": "^7.30.0",
     "eslint-plugin-react-hooks": "^4.5.0",
-    "react": "^17.0.2",
+    "react": "^18.1.0",
     "redux": "^4.2.0",
     "rimraf": "^3.0.2",
     "rollup": "^2.75.5",

packages/redux-devtools-ui/package.json

@@ -70,11 +70,11 @@
     "@storybook/addon-essentials": "^6.5.7",
     "@storybook/react": "^6.5.7",
     "@testing-library/dom": "^8.13.0",
-    "@testing-library/react": "^12.1.5",
-    "@testing-library/user-event": "^13.5.0",
+    "@testing-library/react": "^13.3.0",
+    "@testing-library/user-event": "^14.2.0",
     "@types/color": "^3.0.3",
     "@types/jest": "^27.5.2",
-    "@types/react": "^17.0.45",
+    "@types/react": "^18.0.12",
     "@types/styled-components": "^5.1.25",
     "@typescript-eslint/eslint-plugin": "^5.27.0",
     "@typescript-eslint/parser": "^5.27.0",
@@ -87,9 +87,9 @@
     "eslint-plugin-react-hooks": "^4.5.0",
     "jest": "^27.5.1",
     "ncp": "^2.0.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-is": "^17.0.2",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
+    "react-is": "^18.1.0",
     "require-from-string": "^2.0.2",
     "rimraf": "^3.0.2",
     "styled-components": "^5.3.5",

packages/redux-devtools-ui/test/Button.test.tsx

@@ -9,11 +9,11 @@ describe('Button', function () {
     expect(container.firstChild).toMatchSnapshot();
   });
 
-  it('should handle the click event', () => {
+  it('should handle the click event', async () => {
     const onClick = jest.fn();
     render(<Button onClick={onClick}>ClickMe</Button>);
 
-    userEvent.click(screen.getByRole('button'));
+    await userEvent.click(screen.getByRole('button'));
     expect(onClick).toHaveBeenCalled();
   });
 });

packages/redux-devtools-ui/test/ContextMenu.test.tsx

@@ -18,13 +18,13 @@ describe('ContextMenu', function () {
     );
     expect(container.firstChild).toMatchSnapshot();
   });
-  it('should handle the click event', () => {
+  it('should handle the click event', async () => {
     const onClick = jest.fn();
     render(
       <ContextMenu items={items} onClick={onClick} x={100} y={100} visible />
     );
 
-    userEvent.click(screen.getByRole('button', { name: 'Menu Item 1' }));
+    await userEvent.click(screen.getByRole('button', { name: 'Menu Item 1' }));
     expect(onClick).toHaveBeenCalled();
   });
 });

packages/redux-devtools-ui/test/Dialog.test.tsx

@@ -52,7 +52,7 @@ describe('Dialog', function () {
     expect(container.firstChild).toMatchSnapshot();
   });
 
-  it('should handle dismiss event', () => {
+  it('should handle dismiss event', async () => {
     const onDismiss = jest.fn();
     render(
       <Dialog
@@ -64,11 +64,11 @@ describe('Dialog', function () {
       />
     );
 
-    userEvent.click(screen.getByRole('button', { name: 'Cancel' }));
+    await userEvent.click(screen.getByRole('button', { name: 'Cancel' }));
     expect(onDismiss).toHaveBeenCalled();
   });
 
-  it('should handle submit event', () => {
+  it('should handle submit event', async () => {
     const onSubmit = jest.fn();
     render(
       <Dialog
@@ -80,7 +80,7 @@ describe('Dialog', function () {
       />
     );
 
-    userEvent.click(screen.getByRole('button', { name: 'Submit' }));
+    await userEvent.click(screen.getByRole('button', { name: 'Submit' }));
     expect(onSubmit).toHaveBeenCalled();
   });
 });

packages/redux-devtools-ui/test/Form.test.tsx

@@ -44,7 +44,7 @@ describe('Form', function () {
     expect(container.firstChild).toMatchSnapshot();
   });
 
-  it('should handle the submit event', () => {
+  it('should handle the submit event', async () => {
     const onSubmit = jest.fn();
     render(
       <Form
@@ -55,7 +55,7 @@ describe('Form', function () {
       />
     );
 
-    userEvent.click(screen.getByRole('button', { name: 'Submit' }));
+    await userEvent.click(screen.getByRole('button', { name: 'Submit' }));
     expect(onSubmit).toHaveBeenCalled();
   });
 });

packages/redux-devtools-ui/test/Notification.test.tsx

@@ -23,11 +23,11 @@ describe('Notification', function () {
     expect(container.firstChild).toMatchSnapshot();
   });
 
-  it('should handle the click event', () => {
+  it('should handle the click event', async () => {
     const onClose = jest.fn();
     render(<Notification onClose={onClose}>Message</Notification>);
 
-    userEvent.click(screen.getByRole('button'));
+    await userEvent.click(screen.getByRole('button'));
     expect(onClose).toHaveBeenCalled();
   });
 });

packages/redux-devtools-ui/test/SegmentedControl.test.tsx

@@ -17,7 +17,7 @@ describe('SegmentedControl', function () {
     );
     expect(container.firstChild).toMatchSnapshot();
   });
-  it('should handle the click event', () => {
+  it('should handle the click event', async () => {
     const onClick = jest.fn();
     render(
       <SegmentedControl
@@ -28,7 +28,7 @@ describe('SegmentedControl', function () {
       />
     );
 
-    userEvent.click(screen.getByRole('button', { name: 'Button1' }));
+    await userEvent.click(screen.getByRole('button', { name: 'Button1' }));
     expect(onClick).toHaveBeenCalled();
   });
 });

packages/redux-devtools-ui/test/Select.test.tsx

@@ -37,27 +37,27 @@ describe('Select', function () {
     expect(container.firstChild).toMatchSnapshot();
   });
 
-  it('should select another option', () => {
+  it('should select another option', async () => {
     const onChange = jest.fn();
     const { container } = render(
       <Select options={options} onChange={onChange} />
     );
 
-    userEvent.type(screen.getByRole('combobox'), 'two');
+    await userEvent.type(screen.getByRole('combobox'), 'two');
     expect(container.firstChild).toMatchSnapshot();
-    userEvent.type(screen.getByRole('combobox'), '{enter}');
+    await userEvent.type(screen.getByRole('combobox'), '{enter}');
     expect(onChange).toHaveBeenCalled();
   });
 
-  it("shouldn't find any results", () => {
+  it("shouldn't find any results", async () => {
     const onChange = jest.fn();
     const { container } = render(
       <Select options={options} onChange={onChange} />
     );
 
-    userEvent.type(screen.getByRole('combobox'), 'text');
+    await userEvent.type(screen.getByRole('combobox'), 'text');
     expect(container.firstChild).toMatchSnapshot();
-    userEvent.type(screen.getByRole('combobox'), '{enter}');
+    await userEvent.type(screen.getByRole('combobox'), '{enter}');
     expect(onChange).not.toHaveBeenCalled();
   });
 });

packages/redux-devtools-ui/test/Tabs.test.tsx

@@ -43,11 +43,11 @@ describe('Tabs', function () {
     expect(container.firstChild).toMatchSnapshot();
   });
 
-  it('should select tab', () => {
+  it('should select tab', async () => {
     const onClick = jest.fn();
     render(<Tabs tabs={tabs} onClick={onClick} />);
 
-    userEvent.click(screen.getByRole('button', { name: 'Tab1' }));
+    await userEvent.click(screen.getByRole('button', { name: 'Tab1' }));
     expect(onClick).toHaveBeenCalled();
   });
 });

packages/redux-devtools/examples/counter/package.json

@@ -23,8 +23,8 @@
     "@redux-devtools/dock-monitor": "^3.0.0",
     "@redux-devtools/log-monitor": "^4.0.0",
     "prop-types": "^15.8.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
     "react-redux": "^8.0.2",
     "redux": "^4.2.0",
     "redux-thunk": "^2.4.1"
@@ -36,8 +36,8 @@
     "@babel/preset-typescript": "^7.17.12",
     "@types/node": "^16.11.38",
     "@types/prop-types": "^15.7.5",
-    "@types/react": "^17.0.45",
-    "@types/react-dom": "^17.0.17",
+    "@types/react": "^18.0.12",
+    "@types/react-dom": "^18.0.5",
     "@types/webpack-env": "^1.17.0",
     "@typescript-eslint/eslint-plugin": "^5.27.0",
     "@typescript-eslint/parser": "^5.27.0",

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/package.json

@@ -36,8 +36,8 @@
     "@redux-devtools/log-monitor": "^4.0.0",
     "classnames": "^2.3.1",
     "prop-types": "^15.8.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
     "react-redux": "^8.0.2",
     "redux": "^4.2.0",
     "todomvc-app-css": "^2.4.2"
@@ -50,8 +50,8 @@
     "@types/classnames": "^2.3.1",
     "@types/node": "^16.11.38",
     "@types/prop-types": "^15.7.5",
-    "@types/react": "^17.0.45",
-    "@types/react-dom": "^17.0.17",
+    "@types/react": "^18.0.12",
+    "@types/react-dom": "^18.0.5",
     "@types/webpack-env": "^1.17.0",
     "@typescript-eslint/eslint-plugin": "^5.27.0",
     "@typescript-eslint/parser": "^5.27.0",

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} />);

packages/redux-devtools/package.json

@@ -58,7 +58,7 @@
     "@types/jest": "^27.5.2",
     "@types/lodash": "^4.14.182",
     "@types/node": "^16.11.38",
-    "@types/react": "^17.0.45",
+    "@types/react": "^18.0.12",
     "@typescript-eslint/eslint-plugin": "^5.27.0",
     "@typescript-eslint/parser": "^5.27.0",
     "eslint": "^8.17.0",
@@ -67,8 +67,8 @@
     "eslint-plugin-react": "^7.30.0",
     "eslint-plugin-react-hooks": "^4.5.0",
     "jest": "^27.5.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
     "react-redux": "^8.0.2",
     "redux": "^4.2.0",
     "rimraf": "^3.0.2",