chore(deps): update to react v19 and fix some issues

InformaticsMatters · Jan 5, 2025 · d9f0ed5 · d9f0ed5
1 parent b17cc23
commit d9f0ed5
Show file tree

Hide file tree

Showing 7 changed files with 363 additions and 367 deletions.
diff --git a/package.json b/package.json
@@ -64,7 +64,7 @@
     "@types/node": "22.9.0",
     "@types/plotly.js-basic-dist": "1.54.4",
     "@types/prismjs": "1.26.5",
-    "@types/react": "18.3.18",
+    "@types/react": "19.0.2",
     "@types/react-plotly.js": "2.6.3",
     "axios": "1.7.9",
     "dayjs": "1.11.13",
@@ -90,8 +90,8 @@
     "notistack": "3.0.1",
     "plotly.js-basic-dist": "2.35.3",
     "prismjs": "1.29.0",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "react-dropzone": "14.3.5",
     "react-hook-form": "7.54.2",
     "react-plotly.js": "2.6.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/DataTable/IndeterminateCheckbox.tsx b/src/components/DataTable/IndeterminateCheckbox.tsx
@@ -1,4 +1,4 @@
-import { type ForwardedRef, forwardRef, type MutableRefObject, useEffect, useRef } from "react";
+import { type ForwardedRef, forwardRef, type RefObject, useEffect, useRef } from "react";
 
 import { Checkbox, type CheckboxProps } from "@mui/material";
 
@@ -10,8 +10,8 @@ const IndeterminateCheckboxComponent = (
   { indeterminate, ...rest }: CheckboxProps,
   ref: ForwardedRef<HTMLInputElement>,
 ) => {
-  const defaultRef = useRef();
-  const resolvedRef = (ref ?? defaultRef) as MutableRefObject<HTMLButtonElement>;
+  const defaultRef = useRef<HTMLButtonElement>(null);
+  const resolvedRef = (ref ?? defaultRef) as RefObject<HTMLButtonElement>;
 
   useEffect(() => {
     (resolvedRef.current as HTMLInputElement).indeterminate = !!(indeterminate ?? false);

diff --git a/src/components/runCards/JobCard/JobModal.tsx b/src/components/runCards/JobCard/JobModal.tsx
@@ -126,7 +126,7 @@ export const JobModal = ({
     Object.keys(inputsData).length > 0 ? inputsData : specInputs,
   );
 
-  const formRef = useRef<any>();
+  const formRef = useRef<any>(null);
 
   // Since the default value are obtained async, we have to wait for them to arrive in order to set
   useEffect(() => {

diff --git a/src/components/userContext/SelectUnit.tsx b/src/components/userContext/SelectUnit.tsx
@@ -72,8 +72,8 @@ export const SelectUnit = ({
             }}
           />
         )}
-        renderOption={(props, option) => (
-          <Box component="li" {...props}>
+        renderOption={({ key, ...props }, option) => (
+          <Box component="li" key={key} {...props}>
             <Box component="span" sx={{ display: "inline-block", pr: 1 }}>
               <ItemIcons item={option} />
             </Box>

diff --git a/src/features/DatasetUpload/SingleFileUploader.tsx b/src/features/DatasetUpload/SingleFileUploader.tsx
@@ -38,8 +38,8 @@ export const SingleFileUploadWithProgress = ({
   changeMimeType,
 }: SingleFileUploadWithProgressProps) => {
   const queryClient = useQueryClient();
-  const fileNameRef = useRef<HTMLInputElement>();
-  const fileExtRef = useRef<HTMLInputElement>();
+  const fileNameRef = useRef<HTMLInputElement>(null);
+  const fileExtRef = useRef<HTMLInputElement>(null);
 
   const composeNewFilePath = () => {
     return `${fileNameRef.current?.value}${fileExtRef.current?.value}`;

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -1,4 +1,4 @@
-import { useMemo } from "react";
+import { StrictMode, useMemo } from "react";
 
 import { setBaseUrl as setASBaseUrl } from "@squonk/account-server-client";
 import { setBaseUrl as setDMBaseUrl } from "@squonk/data-manager-client";
@@ -52,31 +52,33 @@ const App = ({ Component, pageProps }: CustomAppProps) => {
   // }
 
   return (
-    <AppCacheProvider {...pageProps}>
-      <Head>
-        <meta content="minimum-scale=1, initial-scale=1, width=device-width" name="viewport" />
-        <style>{openSansFontCss}</style>
-      </Head>
-      <ThemeProviders>
-        <UserProvider
-          loginUrl={`${process.env.NEXT_PUBLIC_BASE_PATH ?? ""}/api/auth/login`}
-          profileUrl={`${process.env.NEXT_PUBLIC_BASE_PATH ?? ""}/api/auth/me`}
-        >
-          <QueryClientProvider client={queryClient}>
-            <HydrationBoundary state={pageProps.dehydratedState}>
-              <SnackbarProvider>
-                <MDXComponentProvider>
-                  <TopLevelHooks>
-                    <Component {...pageProps} />
-                  </TopLevelHooks>
-                </MDXComponentProvider>
-              </SnackbarProvider>
-            </HydrationBoundary>
-            <ReactQueryDevtools client={queryClient} />
-          </QueryClientProvider>
-        </UserProvider>
-      </ThemeProviders>
-    </AppCacheProvider>
+    <StrictMode>
+      <AppCacheProvider {...pageProps}>
+        <Head>
+          <meta content="minimum-scale=1, initial-scale=1, width=device-width" name="viewport" />
+          <style>{openSansFontCss}</style>
+        </Head>
+        <ThemeProviders>
+          <UserProvider
+            loginUrl={`${process.env.NEXT_PUBLIC_BASE_PATH ?? ""}/api/auth/login`}
+            profileUrl={`${process.env.NEXT_PUBLIC_BASE_PATH ?? ""}/api/auth/me`}
+          >
+            <QueryClientProvider client={queryClient}>
+              <HydrationBoundary state={pageProps.dehydratedState}>
+                <SnackbarProvider>
+                  <MDXComponentProvider>
+                    <TopLevelHooks>
+                      <Component {...pageProps} />
+                    </TopLevelHooks>
+                  </MDXComponentProvider>
+                </SnackbarProvider>
+              </HydrationBoundary>
+              <ReactQueryDevtools client={queryClient} />
+            </QueryClientProvider>
+          </UserProvider>
+        </ThemeProviders>
+      </AppCacheProvider>
+    </StrictMode>
   );
 };