Update to react v19

Author: miikaah

package-lock.json

@@ -24,8 +24,8 @@
     "lodash.isequal": "4.5.0",
     "lodash.sortby": "4.7.0",
     "quantize": "1.0.2",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "react-redux": "8.1.3",
     "react-router": "6.27.0",
     "react-router-dom": "6.27.0",
@@ -35,7 +35,7 @@
   },
   "devDependencies": {
     "@eslint/js": "9.22.0",
-    "@miikaah/musa-core": "10.4.8",
+    "@miikaah/musa-core": "10.6.1",
     "@testing-library/dom": "10.4.0",
     "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "16.2.0",
@@ -44,8 +44,8 @@
     "@types/lodash.sortby": "4.7.9",
     "@types/node": "22.13.10",
     "@types/quantize": "1.0.2",
-    "@types/react": "18.3.18",
-    "@types/react-dom": "18.3.5",
+    "@types/react": "19.0.10",
+    "@types/react-dom": "19.0.4",
     "@types/react-redux": "7.1.34",
     "@typescript-eslint/eslint-plugin": "8.26.1",
     "@typescript-eslint/parser": "8.26.1",

package.json

@@ -72,7 +72,7 @@ const AlbumImage = ({ item, animate = true }: AlbumImageProps) => {
     <Image
       alt="Album image"
       animate={animate}
-      src={getSrc(src)}
+      src={getSrc(src) || undefined}
       draggable={false}
     />
   );

src/components/AlbumImage/AlbumImage.tsx

@@ -81,7 +81,7 @@ const Wrapper = styled.div`
 const Image = styled.img.attrs<{
   maxHeight: number;
   isCoverLoaded: boolean;
-  src: string;
+  src: string | undefined;
   scaleDownImage: boolean;
   isMobile: boolean;
 }>(({ maxHeight, isCoverLoaded, src, scaleDownImage, isMobile }) => ({
@@ -546,7 +546,7 @@ const Cover = ({ currentItem, coverData, currentTheme }: CoverProps) => {
             <>
               <Image
                 id="albumCover"
-                src={cleanUrl(src)}
+                src={cleanUrl(src) || undefined}
                 ref={coverRef}
                 crossOrigin=""
                 maxHeight={coverData.maxHeight}

src/components/Cover/Cover.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef } from "react";
 
 export const useAnimationFrame = (callback: () => void) => {
-  const requestRef = useRef<number>();
+  const requestRef = useRef<number>(null);
 
   useEffect(() => {
     const animate = () => {
@@ -10,7 +10,10 @@ export const useAnimationFrame = (callback: () => void) => {
     };
 
     requestRef.current = requestAnimationFrame(animate);
-    // @ts-expect-error it can not be undefined
-    return () => cancelAnimationFrame(requestRef.current);
+    return () => {
+      if (requestRef && requestRef.current) {
+        cancelAnimationFrame(requestRef.current);
+      }
+    };
   }, [callback]);
 };

src/hooks/useAnimationFrame.ts

@@ -2,7 +2,7 @@ import { useEffect, useRef } from "react";
 
 // See: https://overreacted.io/making-setinterval-declarative-with-react-hooks/
 export const useInterval = (callback: () => void, delay: number) => {
-  const savedCallback = useRef<() => void>();
+  const savedCallback = useRef<() => void>(null);
 
   // Remember the latest callback.
   useEffect(() => {
@@ -12,8 +12,9 @@ export const useInterval = (callback: () => void, delay: number) => {
   // Set up the interval.
   useEffect(() => {
     function tick() {
-      // @ts-expect-error it can not be undefined
-      savedCallback.current();
+      if (savedCallback && savedCallback.current) {
+        savedCallback.current();
+      }
     }
     if (delay !== null) {
       let id = setInterval(tick, delay);