Add createRoot and update react to latest 18

package.json

@@ -35,7 +35,7 @@
     "@playwright/test": "^1.49.1",
     "@vitejs/plugin-react": "^4.3.4",
     "eslint-config-react-app": "^7.0.1",
-    "react": "^18.0.2",
+    "react": "^18.3.1",
     "vite": "^6.1.0",
     "vite-plugin-dts": "^3.5.1"
   }

packages/app/package.json

@@ -19,12 +19,12 @@
     "@types/jest": "^27.4.0",
     "@types/node": "^16.11.22",
     "@types/react": "^17.0.39",
-    "@types/react-dom": "^17.0.11",
+    "@types/react-dom": "^18.3.1",
     "@visdesignlab/upset2-core": "^0.1.0",
     "@visdesignlab/upset2-react": "^0.1.0",
     "localforage": "^1.10.0",
     "multinet": "0.23.3",
-    "react": "^18.0.2",
+    "react": "^18.3.1",
     "react-dom": "^18.0.2",
     "react-router-dom": "^6.14.1",
     "recoil": "^0.6.1",

packages/app/src/index.tsx

@@ -6,8 +6,8 @@ import '@fontsource/roboto/700.css';
 
 import { Box, CircularProgress, ThemeProvider } from '@mui/material';
 import React, { Suspense } from 'react';
-import ReactDOM from 'react-dom';
 import { RecoilRoot } from 'recoil';
+import { createRoot } from 'react-dom/client';
 
 import App from './App';
 import DefaultTheme from './components/theme';
@@ -61,7 +61,9 @@ oAuth.maybeRestoreLogin().then(() => {
     invalidateSharedLoginCookie();
   }
 
-  ReactDOM.render(
+  const container = document.getElementById('root') as HTMLElement
+  const root = createRoot(container);
+  root.render(
     <React.StrictMode>
       <ThemeProvider theme={DefaultTheme}>
         <RecoilRoot>
@@ -86,12 +88,6 @@ oAuth.maybeRestoreLogin().then(() => {
           </Suspense>
         </RecoilRoot>
       </ThemeProvider>
-    </React.StrictMode>,
-    document.getElementById('root'),
+    </React.StrictMode>
   );
 });
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-// reportWebVitals(console.log);

packages/upset/package.json

@@ -33,7 +33,7 @@
     "build-storybook": "storybook build"
   },
   "peerDependencies": {
-    "react": "^18.0.2",
+    "react": "^18.3.1",
     "react-dom": "^18.0.2"
   },
   "husky": {
@@ -69,13 +69,14 @@
     "@storybook/react-vite": "^8.2.8",
     "@trrack/core": "^1.3.0-beta.1",
     "@trrack/vis-react": "^1.3.0",
+    "@types/react-dom": "^18.2.0",
     "@visdesignlab/upset2-core": "*",
     "d3-array": "^3.2.4",
     "d3-drag": "^3.0.0",
     "d3-dsv": "^3.0.1",
     "d3-scale": "^4.0.2",
     "d3-selection": "^3.0.0",
-    "react": "^18.0.2",
+    "react": "^18.3.1",
     "react-dom": "^18.0.2",
     "react-markdown": "^8.0.7",
     "react-spring": "^9.4.4",

yarn.lock

@@ -2599,11 +2599,16 @@
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.14.tgz#1433419d73b2a7ebfc6918dcefd2ec0d5cd698f2"
   integrity sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==
 
-"@types/react-dom@<18.0.0", "@types/react-dom@^17.0.11":
+"@types/react-dom@<18.0.0":
   version "17.0.26"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.26.tgz#fa7891ba70fd39ddbaa7e85b6ff9175bb546bc1b"
   integrity sha512-Z+2VcYXJwOqQ79HreLU/1fyQ88eXSSFh6I3JdrEHQIfYSI0kCQpTGvOrbE6jFGGYXKsHuwY9tBa/w5Uo6KzrEg==
 
+"@types/react-dom@^18.2.0", "@types/react-dom@^18.3.1":
+  version "18.3.5"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.3.5.tgz#45f9f87398c5dcea085b715c58ddcf1faf65f716"
+  integrity sha512-P4t6saawp+b/dFrUr2cvkVsfvPguwsxtH6dNIYRllMsefqFzkZk5UIjzyDOv5g1dXIPdG4Sp1yCR4Z6RCUsG/Q==
+
 "@types/react-transition-group@^4.4.10":
   version "4.4.12"
   resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.12.tgz#b5d76568485b02a307238270bfe96cb51ee2a044"
@@ -6853,7 +6858,7 @@ react-is@^16.13.1, react-is@^16.7.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
-react-is@^17.0.1, react-is@^17.0.2:
+react-is@^17.0.1:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
@@ -6960,7 +6965,7 @@ react-vega@^7.4.4:
     prop-types "^15.8.1"
     vega-embed "^6.5.1"
 
-"react@16.8 - 18", react@^18.0.2:
+"react@16.8 - 18", react@^18.3.1:
   version "18.3.1"
   resolved "https://registry.yarnpkg.com/react/-/react-18.3.1.tgz#49ab892009c53933625bd16b2533fc754cab2891"
   integrity sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==