React v19 compatibility

Author: onderonur

apps/demo/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

apps/demo/package.json

@@ -11,23 +11,23 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "next": "14.2.5",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "next": "15.3.1",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
     "react-infinite-scroll-hook": "*"
   },
   "devDependencies": {
     "@repo/eslint-config": "*",
     "@repo/lint-staged-config": "*",
     "@repo/typescript-config": "*",
-    "@types/node": "^22.4.0",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
-    "autoprefixer": "^10.4.20",
+    "@types/node": "^22.15.3",
+    "@types/react": "^19.1.2",
+    "@types/react-dom": "^19.1.3",
+    "autoprefixer": "^10.4.21",
     "eslint": "^8.57.0",
     "eslint-config-next": "14.2.5",
-    "postcss": "^8.4.41",
+    "postcss": "^8.5.3",
     "tailwindcss": "^3.4.10",
-    "typescript": "^5.5.4"
+    "typescript": "^5.8.3"
   }
 }

apps/demo/src/app/reverse-horizontal-element-scroll/page.tsx

@@ -17,14 +17,14 @@ export default function ReverseHorizontalElementScrollPage() {
   });
 
   const scrollableRootRef = useRef<React.ComponentRef<'div'> | null>(null);
-  const lastScrollDistanceToRightRef = useRef<number>();
+  const lastScrollDistanceToRightRef = useRef<number>(0);
 
   const reversedItems = useMemo(() => [...items].reverse(), [items]);
 
   // We keep the scroll position when new items are added etc.
   useLayoutEffect(() => {
     const scrollableRoot = scrollableRootRef.current;
-    const lastScrollDistanceToRight = lastScrollDistanceToRightRef.current ?? 0;
+    const lastScrollDistanceToRight = lastScrollDistanceToRightRef.current;
     if (scrollableRoot) {
       scrollableRoot.scrollLeft =
         scrollableRoot.scrollWidth - lastScrollDistanceToRight;

apps/demo/src/app/reverse-vertical-element-scroll/page.tsx

@@ -17,15 +17,14 @@ export default function ReverseVerticalElementScrollPage() {
   });
 
   const scrollableRootRef = useRef<React.ComponentRef<'div'> | null>(null);
-  const lastScrollDistanceToBottomRef = useRef<number>();
+  const lastScrollDistanceToBottomRef = useRef<number>(0);
 
   const reversedItems = useMemo(() => [...items].reverse(), [items]);
 
   // We keep the scroll position when new items are added etc.
   useLayoutEffect(() => {
     const scrollableRoot = scrollableRootRef.current;
-    const lastScrollDistanceToBottom =
-      lastScrollDistanceToBottomRef.current ?? 0;
+    const lastScrollDistanceToBottom = lastScrollDistanceToBottomRef.current;
     if (scrollableRoot) {
       scrollableRoot.scrollTop =
         scrollableRoot.scrollHeight - lastScrollDistanceToBottom;

apps/demo/src/app/reverse-window-scroll/page.tsx

@@ -16,14 +16,13 @@ export default function ReverseWindowScrollPage() {
     disabled: Boolean(error),
   });
 
-  const lastScrollDistanceToBottomRef = useRef<number>();
+  const lastScrollDistanceToBottomRef = useRef<number>(0);
 
   const reversedItems = useMemo(() => [...items].reverse(), [items]);
 
   // We keep the scroll position when new items are added etc.
   useLayoutEffect(() => {
-    const lastScrollDistanceToBottom =
-      lastScrollDistanceToBottomRef.current ?? 0;
+    const lastScrollDistanceToBottom = lastScrollDistanceToBottomRef.current;
 
     document.documentElement.scrollTop =
       document.body.scrollHeight - lastScrollDistanceToBottom;