#1205 - Upgrade React to 18 and change render function

- also, upgrade other libraries to support react 18 and fix anything that broke immediately
ral-facilities · Apr 5, 2023 · 8f80096 · 8f80096
1 parent 6e68bdc
commit 8f80096
Show file tree

Hide file tree

Showing 7 changed files with 151 additions and 161 deletions.
diff --git a/package.json b/package.json
@@ -3,8 +3,8 @@
   "version": "1.1.0",
   "private": true,
   "resolutions": {
-    "@types/react": "17.0.38",
-    "@types/react-dom": "17.0.11"
+    "@types/react": "18.0.33",
+    "@types/react-dom": "18.0.11"
   },
   "dependencies": {
     "@emotion/react": "11.10.0",
@@ -14,12 +14,12 @@
     "@types/history": "4.7.3",
     "@types/jest": "29.4.0",
     "@types/js-cookie": "3.0.1",
-    "@types/react-dom": "17.0.11",
-    "@types/react-redux-toastr": "7.6.0",
-    "@types/react-router-dom": "5.3.1",
+    "@types/react-dom": "18.0.11",
+    "@types/react-redux-toastr": "7.6.2",
+    "@types/react-router-dom": "5.3.3",
     "@types/redux-logger": "3.0.8",
     "axios": "0.27.2",
-    "connected-react-router": "6.9.1",
+    "connected-react-router": "6.9.3",
     "cookie-parser": "1.4.5",
     "custom-event-polyfill": "1.0.7",
     "cypress-failed-log": "2.10.0",
@@ -37,14 +37,14 @@
     "prettier": "2.8.0",
     "prop-types": "15.8.1",
     "query-string": "7.1.1",
-    "react": "17.0.2",
+    "react": "18.2.0",
     "react-app-polyfill": "3.0.0",
-    "react-dom": "17.0.2",
+    "react-dom": "18.2.0",
     "react-i18next": "12.1.1",
     "react-joyride": "2.5.0",
     "react-redux": "8.0.4",
-    "react-redux-toastr": "7.6.8",
-    "react-router-dom": "5.3.0",
+    "react-redux-toastr": "7.6.11",
+    "react-router-dom": "5.3.4",
     "react-scripts": "5.0.0",
     "redux": "4.2.0",
     "redux-logger": "3.0.6",
@@ -102,13 +102,13 @@
   ],
   "devDependencies": {
     "@testing-library/jest-dom": "5.16.5",
-    "@testing-library/react": "12.1.5",
+    "@testing-library/react": "14.0.0",
     "@testing-library/user-event": "14.4.2",
     "@types/jsonwebtoken": "9.0.1",
     "@types/node": "18.11.9",
-    "@types/react": "17.0.38",
+    "@types/react": "18.0.33",
     "@types/react-redux": "7.1.20",
-    "@types/react-router": "5.1.12",
+    "@types/react-router": "5.1.20",
     "@types/redux-mock-store": "1.0.2",
     "@typescript-eslint/eslint-plugin": "5.49.0",
     "@typescript-eslint/parser": "5.49.0",

diff --git a/public/index.html b/public/index.html
@@ -1,19 +1,17 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico?v=2" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1, shrink-to-fit=no"
-    />
-    <meta name="theme-color" content="#000000" />
-    <!--
+
+<head>
+  <meta charset="utf-8" />
+  <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico?v=2" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+  <meta name="theme-color" content="#000000" />
+  <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
+  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+  <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
@@ -22,16 +20,17 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `yarn run build`.
     -->
-    <title>SciGateway</title>
-  </head>
-  <body>
-    <script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
-    <script>window.React || document.write('<script src="%PUBLIC_URL%/react.production.min.js">\x3C/script>')</script>
-    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
-    <script>window.ReactDOM || document.write('<script src="%PUBLIC_URL%/react-dom.production.min.js">\x3C/script>')</script>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="scigateway"></div>
-    <!--
+  <title>SciGateway</title>
+</head>
+
+<body>
+  <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
+  <script>window.React || document.write('<script src="%PUBLIC_URL%/react.production.min.js">\x3C/script>')</script>
+  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
+  <script>window.ReactDOM || document.write('<script src="%PUBLIC_URL%/react-dom.production.min.js">\x3C/script>')</script>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="scigateway"></div>
+  <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
 
@@ -41,5 +40,6 @@
       To begin the development, run `yarn start` or `yarn start`.
       To create a production bundle, use `yarn run build` or `yarn build`.
     -->
-  </body>
-</html>
+</body>
+
+</html>
diff --git a/src/App.test.tsx b/src/App.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import App, { AppSansHoc } from './App';
 import { act, fireEvent, render, screen } from '@testing-library/react';
 import { flushPromises } from './setupTests';
@@ -26,8 +26,9 @@ describe('App', () => {
 
   it('renders without crashing', () => {
     const div = document.createElement('div');
-    ReactDOM.render(<App useSuspense={false} />, div);
-    ReactDOM.unmountComponentAtNode(div);
+    const root = createRoot(div);
+    root.render(<App useSuspense={false} />);
+    root.unmount();
   });
 
   it('should show preloader when react-i18next is not ready', () => {

diff --git a/src/example.component.tsx b/src/example.component.tsx
@@ -7,7 +7,13 @@ interface ExampleComponentProps {
 }
 
 const ExampleComponent = (props: ExampleComponentProps): React.ReactElement => (
-  <div>{props.notifications}</div>
+  <div>
+    {props.notifications.map((notification, index) => (
+      <div key={index}>
+        {notification.severity} {notification.message}
+      </div>
+    ))}
+  </div>
 );
 
 const mapStateToProps = (state: StateType): ExampleComponentProps => {

diff --git a/src/index.tsx b/src/index.tsx
@@ -3,11 +3,11 @@ import 'react-app-polyfill/stable';
 import 'custom-event-polyfill';
 import './i18n';
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import App from './App';
 import 'typeface-roboto';
 
-ReactDOM.render(
-  <App useSuspense={false} />,
-  document.getElementById('scigateway')
-);
+const container = document.getElementById('scigateway');
+// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+const root = createRoot(container!);
+root.render(<App useSuspense={false} />);
diff --git a/src/navigationDrawer/navigationDrawer.component.tsx b/src/navigationDrawer/navigationDrawer.component.tsx
@@ -110,7 +110,7 @@ export const NavigationDrawer = (
     [createLink]
   );
 
-  const renderRoutes = useCallback((): React.ReactFragment => {
+  const renderRoutes = useCallback((): React.ReactElement => {
     let plugins = props.plugins;
 
     if (props.homepageUrl) {
@@ -123,7 +123,7 @@ export const NavigationDrawer = (
     );
 
     return (
-      <Fragment>
+      <>
         {Object.keys(sectionPlugins)
           .sort()
           .map((section, i) =>
@@ -133,7 +133,7 @@ export const NavigationDrawer = (
               i
             )
           )}
-      </Fragment>
+      </>
     );
   }, [buildMenuSection, props.plugins, props.homepageUrl]);