Merge pull request #1026 from nataliauvarova/staging

#971: Transition frontend to React 18, update dependencies
ispras · Sep 6, 2023 · 9c65d8e · 9c65d8e
2 parents 74429d2 + c425e6e
commit 9c65d8e
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 35 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -75,10 +75,10 @@
     "lodash": "^4.17.21",
     "moment": "^2.29.2",
     "plotly.js": "^2.20.0",
-    "react": "^17.0.2",
+    "react": "^18.2.0",
     "react-autocomplete": "^1.8.1",
     "react-datepicker": "^4.7.0",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.2.0",
     "react-plotly.js": "^2.6.0",
     "react-redux": "^8.0.0",
     "react-router-dom": "^6.3.0",

diff --git a/src/index.js b/src/index.js
@@ -1,7 +1,7 @@
 import React from "react";
 import { Provider } from "react-redux";
 import { BrowserRouter } from "react-router-dom";
-import ReactDOM from "react-dom";
+import { createRoot } from 'react-dom/client';
 import { ApolloProvider } from "@apollo/client";
 import { applyMiddleware, bindActionCreators, compose, createStore } from "redux";
 import createSagaMiddleware from "redux-saga";
@@ -42,13 +42,12 @@ window.logger = bindActionCreators(
 
 window.dispatch = store.dispatch;
 
-ReactDOM.render(
-  <Provider store={store}>
-    <ApolloProvider client={apollo}>
-      <BrowserRouter>
-        <Layout />
-      </BrowserRouter>
-    </ApolloProvider>
-  </Provider>,
-  document.getElementById("root")
-);
+const root = createRoot(document.getElementById("root"));
+
+root.render(<Provider store={store}>
+  <ApolloProvider client={apollo}>
+    <BrowserRouter>
+      <Layout />
+    </BrowserRouter>
+  </ApolloProvider>
+</Provider>);