refactor: rely on react compiler

public/mockServiceWorker.js

@@ -1,4 +1,3 @@
-/* eslint-disable */
 /* tslint:disable */
 
 /**

src/Components/AlbumArt.tsx

@@ -2,7 +2,7 @@ import { getScaledCoverArtUrl } from "@api/artwork.js";
 import { useAuth } from "@hooks/useAuth";
 import classNames from "classnames";
 import md5 from "md5";
-import { memo, useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 
 export interface AlbumArtProps {
   /**
@@ -97,4 +97,4 @@ function AlbumArt({
   );
 }
 
-export default memo(AlbumArt);
+export default AlbumArt;

src/Components/AlbumHeader.tsx

@@ -2,7 +2,7 @@ import type { SongIds, Songs } from "@api/types.js";
 import { useTrackList } from "@hooks/useTrackList.js";
 import { Link } from "@tanstack/react-router";
 import { Play, Shuffle } from "lucide-react";
-import { SyntheticEvent, memo, useCallback, useMemo } from "react";
+import { SyntheticEvent, useCallback, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 
 import AlbumArt from "./AlbumArt.js";
@@ -100,4 +100,4 @@ function AlbumHeader({ album, tracks }: Readonly<AlbumHeaderProps>) {
   );
 }
 
-export default memo(AlbumHeader);
+export default AlbumHeader;

src/Components/AlbumList.tsx

@@ -1,5 +1,4 @@
 import type { Albums } from "@api/types.js";
-import { memo } from "react";
 
 import Album from "./Album.js";
 import Grid from "./Grid.js";
@@ -19,4 +18,4 @@ function AlbumList({ className, albums }: Readonly<AlbumListProps>) {
   );
 }
 
-export default memo(AlbumList);
+export default AlbumList;

src/Components/Button.tsx

@@ -1,10 +1,5 @@
 import classNames from "classnames";
-import {
-  ButtonHTMLAttributes,
-  PropsWithChildren,
-  ReactElement,
-  memo,
-} from "react";
+import { ButtonHTMLAttributes, PropsWithChildren, ReactElement } from "react";
 
 interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
   /** A function that returns a React component to use as an icon */
@@ -33,4 +28,4 @@ function Button({
   );
 }
 
-export default memo(Button);
+export default Button;

src/Components/Duration.tsx

@@ -1,4 +1,3 @@
-import { memo } from "react";
 import { Temporal } from "temporal-polyfill";
 
 interface DurationProps {
@@ -27,4 +26,4 @@ function Duration({ time }: DurationProps) {
   return <span className="tabular-nums">{output}</span>;
 }
 
-export default memo(Duration);
+export default Duration;

src/Components/MediaControls/FullscreenButton.tsx

@@ -1,6 +1,6 @@
 import { useFullscreen } from "@hooks/useFullscreen";
 import { Fullscreen, Shrink } from "lucide-react";
-import { SyntheticEvent, memo } from "react";
+import { SyntheticEvent } from "react";
 import { useTranslation } from "react-i18next";
 
 function FullscreenButton() {
@@ -39,4 +39,4 @@ function FullscreenButton() {
   );
 }
 
-export default memo(FullscreenButton);
+export default FullscreenButton;

src/Components/MediaControls/PlayButton.tsx

@@ -1,6 +1,6 @@
 import { useAudioRef } from "@hooks/useAudio";
 import { Play } from "lucide-react";
-import { SyntheticEvent, memo } from "react";
+import { SyntheticEvent } from "react";
 import { useTranslation } from "react-i18next";
 
 function PlayButton() {
@@ -24,4 +24,4 @@ function PlayButton() {
   );
 }
 
-export default memo(PlayButton);
+export default PlayButton;

src/Components/MediaControls/SkipButton.tsx

@@ -1,6 +1,6 @@
 import { useTrackList } from "@hooks/useTrackList";
 import { SkipForward } from "lucide-react";
-import { SyntheticEvent, memo } from "react";
+import { SyntheticEvent } from "react";
 import { useTranslation } from "react-i18next";
 
 function SkipButton() {
@@ -23,4 +23,4 @@ function SkipButton() {
   );
 }
 
-export default memo(SkipButton);
+export default SkipButton;

src/Components/MediaControls/StopButton.tsx

@@ -1,7 +1,7 @@
 import { useAudioRef } from "@hooks/useAudio";
 import { useTrackList } from "@hooks/useTrackList";
 import { Square } from "lucide-react";
-import { SyntheticEvent, memo } from "react";
+import { SyntheticEvent } from "react";
 import { useTranslation } from "react-i18next";
 
 function StopButton() {
@@ -31,4 +31,4 @@ function StopButton() {
   );
 }
 
-export default memo(StopButton);
+export default StopButton;

src/Components/MediaPlayer.tsx

@@ -2,7 +2,7 @@ import type { Song } from "@api/types.js";
 import { useTrackList } from "@hooks/useTrackList.js";
 import { AudioProvider } from "@providers/AudioProvider.js";
 import { Link } from "@tanstack/react-router";
-import { memo, useMemo, useState } from "react";
+import { useMemo, useState } from "react";
 
 import AlbumArt from "./AlbumArt.js";
 import Fullscreen from "./MediaPlayer/Fullscreen.js";
@@ -78,4 +78,4 @@ function MediaPlayer() {
   );
 }
 
-export default memo(MediaPlayer);
+export default MediaPlayer;

src/Components/MediaPlayer/Fullscreen.tsx

@@ -1,7 +1,6 @@
 import type { Song } from "@api/types.js";
 import { useFullscreen } from "@hooks/useFullscreen.js";
 import classNames from "classnames";
-import { memo } from "react";
 import { createPortal } from "react-dom";
 import { AutoFocusInside } from "react-focus-lock";
 
@@ -120,4 +119,4 @@ function Fullscreen({ track, currentTime, duration }: FullscreenProps) {
   );
 }
 
-export default memo(Fullscreen);
+export default Fullscreen;

src/Components/MediaPlayer/MediaInfo.tsx

@@ -1,5 +1,4 @@
 import type { Song } from "@api/types.js";
-import { memo } from "react";
 
 import TrackInfo from "../TrackInfo.js";
 import MediaControls from "./MediaControls.js";
@@ -33,4 +32,4 @@ function MediaInfo({
   );
 }
 
-export default memo(MediaInfo);
+export default MediaInfo;

src/Components/MediaSession.tsx

@@ -2,7 +2,7 @@ import { getCoverArtUrl } from "@api/artwork.js";
 import type { Song } from "@api/types.js";
 import { useAuth } from "@hooks/useAuth";
 import { useTrackList } from "@hooks/useTrackList";
-import { ReactNode, memo, useEffect } from "react";
+import { ReactNode, useEffect } from "react";
 
 interface MediaSessionProps {
   track: Song;
@@ -47,4 +47,4 @@ function MediaSession({ track, children }: MediaSessionProps) {
   return children;
 }
 
-export default memo(MediaSession);
+export default MediaSession;

src/Components/Nav.tsx

@@ -1,6 +1,6 @@
 import { Link } from "@tanstack/react-router";
 import { Menu, X } from "lucide-react";
-import { memo, useCallback, useState } from "react";
+import { useCallback, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import logoAvif from "../images/logo192.avif";
@@ -163,4 +163,4 @@ function Nav() {
   );
 }
 
-export default memo(Nav);
+export default Nav;

src/Components/TitleInfo.tsx

@@ -1,5 +1,4 @@
 import type { Song } from "@api/types.js";
-import { memo } from "react";
 import { Helmet } from "react-helmet-async";
 
 interface TitleInfoProps {
@@ -22,4 +21,4 @@ function TitleInfo({ nowPlaying }: Readonly<TitleInfoProps>) {
   );
 }
 
-export default memo(TitleInfo);
+export default TitleInfo;

src/Components/TrackInfo.tsx

@@ -1,6 +1,5 @@
 import type { Song } from "@api/types.js";
 import { Link } from "@tanstack/react-router";
-import { memo } from "react";
 
 interface TrackInfoProps {
   track: Song;
@@ -25,4 +24,4 @@ function TrackInfo({ track }: Readonly<TrackInfoProps>) {
   );
 }
 
-export default memo(TrackInfo);
+export default TrackInfo;

src/Components/TrackListItem.tsx

@@ -2,7 +2,7 @@ import type { Song } from "@api/types.js";
 import { useAlbumTracks } from "@hooks/useAlbumTracks.js";
 import { useTrackList } from "@hooks/useTrackList.js";
 import { Play, Plus } from "lucide-react";
-import { SyntheticEvent, memo, useCallback, useMemo } from "react";
+import { SyntheticEvent, useCallback, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 
 import Duration from "./Duration.js";
@@ -110,4 +110,4 @@ function TrackListItem({
   );
 }
 
-export default memo(TrackListItem);
+export default TrackListItem;

src/Providers/AudioProvider.tsx

@@ -2,7 +2,7 @@ import { getStreamUrl } from "@api/stream.js";
 import type { Song } from "@api/types.js";
 import { useAuth } from "@hooks/useAuth.js";
 import { useTrackList } from "@hooks/useTrackList.js";
-import { PropsWithChildren, memo, useCallback, useEffect, useRef } from "react";
+import { PropsWithChildren, useCallback, useEffect, useRef } from "react";
 
 import { AudioContext } from "../Contexts/AudioContext.js";
 
@@ -12,7 +12,7 @@ interface AudioProviderProps {
   setState: (state: "playing" | "paused" | "stopped") => void;
 }
 
-export const AudioProvider = memo(function AudioProvider({
+export const AudioProvider = function AudioProvider({
   children,
   setCurrentDuration,
   setCurrentTime,
@@ -163,4 +163,4 @@ export const AudioProvider = memo(function AudioProvider({
   return (
     <AudioContext.Provider value={audio}>{children}</AudioContext.Provider>
   );
-});
+};

src/Providers/FullscreenProvider.tsx

@@ -1,6 +1,5 @@
 import {
   PropsWithChildren,
-  memo,
   useCallback,
   useEffect,
   useMemo,
@@ -9,9 +8,7 @@ import {
 
 import { FullscreenContext } from "../Contexts/FullscreenContext";
 
-export const FullscreenProvider = memo(function FullscreenProvider({
-  children,
-}: Readonly<PropsWithChildren>) {
+export function FullscreenProvider({ children }: Readonly<PropsWithChildren>) {
   const [isFullscreen, setIsFullscreen] = useState(false);
 
   const setFullscreen = useCallback(async (enableFullscreen: boolean) => {
@@ -49,4 +46,6 @@ export const FullscreenProvider = memo(function FullscreenProvider({
       {children}
     </FullscreenContext.Provider>
   );
-});
+}
+
+export default FullscreenProvider;