fix(deps): update react monorepo to v19 (major) (#1615)

Co-authored-by: homarr-renovate[bot] <158783068+homarr-renovate[bot]@users.noreply.github.com>
Co-authored-by: Meier Lukas <meierschlumpf@gmail.com>

packages/api/package.json

@@ -41,7 +41,7 @@
     "@trpc/server": "next",
     "dockerode": "^4.0.2",
     "next": "^14.2.20",
-    "react": "^18.3.1",
+    "react": "^19.0.0",
     "superjson": "2.2.2",
     "trpc-to-openapi": "^2.1.0"
   },

packages/auth/package.json

@@ -36,8 +36,8 @@
     "ldapts": "7.2.2",
     "next": "^14.2.20",
     "next-auth": "5.0.0-beta.25",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
     "@homarr/eslint-config": "workspace:^0.2.0",

packages/common/package.json

@@ -28,7 +28,7 @@
     "@homarr/log": "workspace:^0.1.0",
     "dayjs": "^1.11.13",
     "next": "^14.2.20",
-    "react": "^18.3.1",
+    "react": "^19.0.0",
     "tldts": "^6.1.66"
   },
   "devDependencies": {

packages/modals-collection/package.json

@@ -35,7 +35,7 @@
     "@tabler/icons-react": "^3.24.0",
     "dayjs": "^1.11.13",
     "next": "^14.2.20",
-    "react": "^18.3.1"
+    "react": "^19.0.0"
   },
   "devDependencies": {
     "@homarr/eslint-config": "workspace:^0.2.0",

packages/modals/package.json

@@ -26,7 +26,7 @@
     "@homarr/ui": "workspace:^0.1.0",
     "@mantine/core": "^7.14.3",
     "@mantine/hooks": "^7.14.3",
-    "react": "^18.3.1"
+    "react": "^19.0.0"
   },
   "devDependencies": {
     "@homarr/eslint-config": "workspace:^0.2.0",

packages/spotlight/package.json

@@ -38,7 +38,7 @@
     "@tabler/icons-react": "^3.24.0",
     "jotai": "^2.10.3",
     "next": "^14.2.20",
-    "react": "^18.3.1",
+    "react": "^19.0.0",
     "use-deep-compare-effect": "^1.8.1"
   },
   "devDependencies": {

packages/spotlight/src/lib/children.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from "react";
+import type { JSX, ReactNode } from "react";
 
 import type { inferSearchInteractionDefinition } from "./interaction";
 

packages/spotlight/src/lib/group.ts

@@ -1,3 +1,4 @@
+import type { JSX } from "react";
 import type { UseTRPCQueryResult } from "@trpc/react-query/shared";
 
 import type { stringOrTranslation } from "@homarr/translation";

packages/translation/package.json

@@ -34,7 +34,7 @@
     "mantine-react-table": "2.0.0-beta.7",
     "next": "^14.2.20",
     "next-intl": "3.26.0",
-    "react": "^18.3.1"
+    "react": "^19.0.0"
   },
   "devDependencies": {
     "@homarr/eslint-config": "workspace:^0.2.0",

packages/ui/package.json

@@ -35,7 +35,7 @@
     "@tabler/icons-react": "^3.24.0",
     "mantine-react-table": "2.0.0-beta.7",
     "next": "^14.2.20",
-    "react": "^18.3.1"
+    "react": "^19.0.0"
   },
   "devDependencies": {
     "@homarr/eslint-config": "workspace:^0.2.0",

packages/widgets/package.json

@@ -63,7 +63,7 @@
     "dayjs": "^1.11.13",
     "mantine-react-table": "2.0.0-beta.7",
     "next": "^14.2.20",
-    "react": "^18.3.1",
+    "react": "^19.0.0",
     "video.js": "^8.21.0"
   },
   "devDependencies": {

packages/widgets/src/clock/component.tsx

@@ -44,8 +44,8 @@ interface UseCurrentTimeProps {
 
 const useCurrentTime = ({ showSeconds }: UseCurrentTimeProps) => {
   const [time, setTime] = useState(new Date());
-  const timeoutRef = useRef<NodeJS.Timeout>();
-  const intervalRef = useRef<NodeJS.Timeout>();
+  const timeoutRef = useRef<NodeJS.Timeout>(null);
+  const intervalRef = useRef<NodeJS.Timeout>(null);
   const intervalMultiplier = useMemo(() => (showSeconds ? 1 : 60), [showSeconds]);
 
   useEffect(() => {
@@ -62,8 +62,8 @@ const useCurrentTime = ({ showSeconds }: UseCurrentTimeProps) => {
     );
 
     return () => {
-      clearTimeout(timeoutRef.current);
-      clearInterval(intervalRef.current);
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+      if (intervalRef.current) clearInterval(intervalRef.current);
     };
   }, [intervalMultiplier, showSeconds]);
 

packages/widgets/src/dns-hole/controls/TimerModal.tsx

@@ -16,8 +16,8 @@ const TimerModal = ({ opened, close, selectedIntegrationIds, disableDns }: Timer
   const t = useI18n();
   const [hours, setHours] = useState(0);
   const [minutes, setMinutes] = useState(0);
-  const hoursHandlers = useRef<NumberInputHandlers>();
-  const minutesHandlers = useRef<NumberInputHandlers>();
+  const hoursHandlers = useRef<NumberInputHandlers>(null);
+  const minutesHandlers = useRef<NumberInputHandlers>(null);
 
   const handleSetTimer = () => {
     const duration = hours * 3600 + minutes * 60;