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>

apps/nextjs/package.json

@@ -66,8 +66,8 @@
     "next": "^14.2.20",
     "postcss-preset-mantine": "^1.17.0",
     "prismjs": "^1.29.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "react-error-boundary": "^4.1.2",
     "react-simple-code-editor": "^0.14.1",
     "sass": "^1.82.0",
@@ -82,8 +82,8 @@
     "@types/chroma-js": "2.4.4",
     "@types/node": "^22.10.1",
     "@types/prismjs": "^1.26.5",
-    "@types/react": "^18.3.13",
-    "@types/react-dom": "^18.3.1",
+    "@types/react": "^19.0.1",
+    "@types/react-dom": "^19.0.2",
     "@types/swagger-ui-react": "^4.18.3",
     "concurrently": "^9.1.0",
     "eslint": "^9.16.0",

apps/nextjs/src/app/[locale]/boards/_layout-creator.tsx

@@ -1,4 +1,4 @@
-import type { PropsWithChildren } from "react";
+import type { JSX, PropsWithChildren } from "react";
 import { notFound } from "next/navigation";
 import { AppShellMain } from "@mantine/core";
 import { TRPCError } from "@trpc/server";

apps/nextjs/src/app/[locale]/manage/tools/logs/terminal.tsx

@@ -13,7 +13,7 @@ import classes from "./terminal.module.css";
 export const TerminalComponent = () => {
   const ref = useRef<HTMLDivElement>(null);
 
-  const terminalRef = useRef<Terminal>();
+  const terminalRef = useRef<Terminal>(null);
   clientApi.log.subscribe.useSubscription(undefined, {
     onData(data) {
       terminalRef.current?.writeln(`${data.timestamp} ${data.level} ${data.message}`);

apps/nextjs/src/components/board/sections/gridstack/gridstack-item.tsx

@@ -17,7 +17,7 @@ interface Props extends BoxProps {
   height: number;
   minWidth?: number;
   minHeight?: number;
-  innerRef: React.RefObject<GridItemHTMLElement> | undefined;
+  innerRef: React.RefObject<GridItemHTMLElement | null> | undefined;
 }
 
 export const GridStackItem = ({

apps/nextjs/src/components/board/sections/gridstack/init-gridstack.ts

@@ -1,4 +1,4 @@
-import type { MutableRefObject, RefObject } from "react";
+import type { RefObject } from "react";
 
 import type { GridItemHTMLElement } from "@homarr/gridstack";
 import { GridStack } from "@homarr/gridstack";
@@ -9,9 +9,9 @@ interface InitializeGridstackProps {
   section: Omit<Section, "items">;
   itemIds: string[];
   refs: {
-    wrapper: RefObject<HTMLDivElement>;
-    items: MutableRefObject<Record<string, RefObject<GridItemHTMLElement>>>;
-    gridstack: MutableRefObject<GridStack | undefined>;
+    wrapper: RefObject<HTMLDivElement | null>;
+    items: RefObject<Record<string, RefObject<GridItemHTMLElement | null>>>;
+    gridstack: RefObject<GridStack | null>;
   };
   sectionColumnCount: number;
 }

apps/nextjs/src/components/board/sections/gridstack/use-gridstack.ts

@@ -1,4 +1,4 @@
-import type { MutableRefObject, RefObject } from "react";
+import type { RefObject } from "react";
 import { createRef, useCallback, useEffect, useRef } from "react";
 import { useElementSize } from "@mantine/hooks";
 
@@ -11,9 +11,9 @@ import { useSectionActions } from "../section-actions";
 import { initializeGridstack } from "./init-gridstack";
 
 export interface UseGridstackRefs {
-  wrapper: RefObject<HTMLDivElement>;
-  items: MutableRefObject<Record<string, RefObject<GridItemHTMLElement>>>;
-  gridstack: MutableRefObject<GridStack | undefined>;
+  wrapper: RefObject<HTMLDivElement | null>;
+  items: RefObject<Record<string, RefObject<GridItemHTMLElement | null>>>;
+  gridstack: RefObject<GridStack | null>;
 }
 
 interface UseGristackReturnType {
@@ -60,9 +60,9 @@ export const useGridstack = (section: Omit<Section, "items">, itemIds: string[])
   // define reference for wrapper - is used to calculate the width of the wrapper
   const { ref: wrapperRef, width, height } = useElementSize<HTMLDivElement>();
   // references to the diffrent items contained in the gridstack
-  const itemRefs = useRef<Record<string, RefObject<GridItemHTMLElement>>>({});
+  const itemRefs = useRef<Record<string, RefObject<GridItemHTMLElement | null>>>({});
   // reference of the gridstack object for modifications after initialization
-  const gridRef = useRef<GridStack>();
+  const gridRef = useRef<GridStack>(null);
 
   const board = useRequiredBoard();
 

apps/nextjs/src/components/layout/navigation.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "react";
 import { AppShellNavbar, AppShellSection, ScrollArea } from "@mantine/core";
 
 import type { TablerIcon } from "@homarr/ui";

apps/nextjs/tsconfig.json

@@ -13,5 +13,5 @@
     "tsBuildInfoFile": "node_modules/.cache/tsbuildinfo.json"
   },
   "include": [".", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
+  "exclude": ["node_modules", ".next"]
 }

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;