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

* fix(deps): update react

* Fix

* Use createRoot

* Update tests

* Format

* Fix test

Co-authored-by: Renovate Bot <[email protected]>
Co-authored-by: Nathan Bierema <[email protected]>

Author: 3 people

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"