chore: upgrade to react 19

package.json

@@ -30,7 +30,7 @@
     "@emotion/styled": "^11.14.0",
     "@juggle/resize-observer": "^3.4.0",
     "@mui/icons-material": "^7.0.2",
-    "@mui/lab": "7.0.0-beta.11",
+    "@mui/lab": "7.0.0-beta.12",
     "@mui/material": "^7.0.2",
     "@mui/x-data-grid": "^8.2.0",
     "@tauri-apps/api": "2.5.0",
@@ -60,16 +60,15 @@
     "monaco-yaml": "^5.3.1",
     "nanoid": "^5.1.5",
     "peggy": "^5.0.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-error-boundary": "^4.1.2",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "react-error-boundary": "6.0.0",
     "react-hook-form": "^7.54.2",
-    "react-i18next": "^13.5.0",
-    "react-markdown": "^9.1.0",
-    "react-monaco-editor": "^0.56.2",
-    "react-router-dom": "^6.30.0",
-    "react-transition-group": "^4.4.5",
-    "react-virtuoso": "^4.12.5",
+    "react-i18next": "15.5.1",
+    "react-markdown": "10.1.0",
+    "react-monaco-editor": "0.58.0",
+    "react-router-dom": "7.6.0",
+    "react-virtuoso": "^4.12.7",
     "recharts": "^2.15.1",
     "sockette": "^2.0.6",
     "swr": "^2.3.3",
@@ -83,11 +82,10 @@
     "@types/js-cookie": "^3.0.6",
     "@types/js-yaml": "^4.0.9",
     "@types/lodash-es": "^4.17.12",
-    "@types/react": "^18.3.18",
-    "@types/react-dom": "^18.3.5",
-    "@types/react-transition-group": "^4.4.12",
+    "@types/react": "19.1.4",
+    "@types/react-dom": "19.1.5",
     "@vitejs/plugin-legacy": "^6.0.2",
-    "@vitejs/plugin-react": "^4.3.4",
+    "@vitejs/plugin-react": "4.4.1",
     "adm-zip": "^0.5.16",
     "cross-env": "^7.0.3",
     "https-proxy-agent": "^7.0.6",

src/components/profile/editor-viewer.tsx

@@ -97,7 +97,7 @@ export const EditorViewer = <T extends Language>(props: Props<T>) => {
     onClose,
   } = props;
 
-  const editorRef = useRef<monaco.editor.IStandaloneCodeEditor>();
+  const editorRef = useRef<monaco.editor.IStandaloneCodeEditor>(undefined);
   const prevData = useRef<string | undefined>("");
   const currData = useRef<string | undefined>("");
 

src/components/profile/file-input.tsx

@@ -12,7 +12,7 @@ export const FileInput = (props: Props) => {
 
   const { t } = useTranslation();
   // file input
-  const inputRef = useRef<any>();
+  const inputRef = useRef<any>(undefined);
   const [loading, setLoading] = useState(false);
   const [fileName, setFileName] = useState("");
 

src/components/proxy/proxy-groups.tsx

@@ -117,7 +117,7 @@ const LetterItem = memo(
       top: 0,
       right: 0,
     });
-    const hoverTimeoutRef = useRef<ReturnType<typeof setTimeout>>();
+    const hoverTimeoutRef = useRef<ReturnType<typeof setTimeout>>(undefined);
 
     const updateTooltipPosition = useCallback(() => {
       if (!letterRef.current) return;

src/components/setting/mods/guard-state.tsx

@@ -29,13 +29,13 @@ export function GuardState<T>(props: Props<T>) {
   const lockRef = useRef(false);
   const saveRef = useRef(value);
   const lastRef = useRef(0);
-  const timeRef = useRef<any>();
+  const timeRef = useRef<any>(undefined);
 
   if (!isValidElement(children)) {
     return children as any;
   }
 
-  const childProps = { ...children.props };
+  const childProps = { ...(children.props as Record<string, any>) };
 
   childProps[valueProps] = value;
   childProps[onChangeProps] = async (...args: any[]) => {

src/pages/_layout.tsx

@@ -24,7 +24,6 @@ import "dayjs/locale/ru";
 import "dayjs/locale/zh-cn";
 import { getPortableFlag } from "@/services/cmds";
 import React from "react";
-import { TransitionGroup, CSSTransition } from "react-transition-group";
 import { useListen } from "@/hooks/use-listen";
 import { listen } from "@tauri-apps/api/event";
 import { useClashInfo } from "@/hooks/use-clash";
@@ -391,15 +390,9 @@ const Layout = () => {
               {OS !== "macos" && <LayoutControl />}
             </div>
 
-            <TransitionGroup className="the-content">
-              <CSSTransition
-                key={location.pathname}
-                timeout={300}
-                classNames="page"
-              >
-                {React.cloneElement(routersEles, { key: location.pathname })}
-              </CSSTransition>
-            </TransitionGroup>
+            <div className="the-content">
+              {React.cloneElement(routersEles, { key: location.pathname })}
+            </div>
           </div>
         </Paper>
       </ThemeProvider>