build: add million lint

perf: apply memoization

.gitignore

@@ -24,4 +24,6 @@ yarn-error.log*
 
 # Local Netlify folder
 .netlify
-*storybook.log
+*storybook.log
+# Million Lint
+.million

package.json

@@ -27,6 +27,7 @@
   },
   "dependencies": {
     "@heroicons/react": "^2.1.5",
+    "@million/lint": "^1.0.11",
     "@react-hook/window-size": "^3.1.1",
     "@tanstack/react-query": "^5.59.16",
     "@tanstack/react-query-devtools": "^5.59.16",

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 { useEffect, useMemo, useRef, useState } from "react";
+import { memo, useEffect, useMemo, useRef, useState } from "react";
 
 export interface AlbumArtProps {
   /**
@@ -97,4 +97,4 @@ function AlbumArt({
   );
 }
 
-export default AlbumArt;
+export default memo(AlbumArt);

src/Components/AlbumHeader.tsx

@@ -2,7 +2,7 @@ import type { SongIds, Songs } from "@api/types.js";
 import { ArrowsRightLeftIcon, PlayIcon } from "@heroicons/react/24/solid";
 import { useTrackList } from "@hooks/useTrackList.js";
 import { Link } from "@tanstack/react-router";
-import { SyntheticEvent } from "react";
+import { SyntheticEvent, memo, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 
 import AlbumArt from "./AlbumArt.js";
@@ -53,7 +53,12 @@ function AlbumHeader({ album, tracks }: Readonly<AlbumHeaderProps>) {
   return (
     <section className={`flex flex-col gap-6`}>
       <div className={`grid w-full grid-cols-3 gap-6 lg:w-64 lg:grid-cols-1`}>
-        <AlbumArt id={album.coverArt} description={album.name} />
+        {useMemo(
+          () => (
+            <AlbumArt id={album.coverArt} description={album.name} />
+          ),
+          [album],
+        )}
         <div className={`col-span-2 lg:col-span-1`}>
           <h1 className={`text-2xl lg:text-3xl`}>{album.name}</h1>
           <h2 className={`text-xl`}>
@@ -90,4 +95,4 @@ function AlbumHeader({ album, tracks }: Readonly<AlbumHeaderProps>) {
   );
 }
 
-export default AlbumHeader;
+export default memo(AlbumHeader);

src/Components/AlbumList.tsx

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

src/Components/Button.tsx

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

src/Components/Duration.tsx

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

src/Components/MediaControls/FullscreenButton.tsx

@@ -3,7 +3,7 @@ import {
   ArrowsPointingOutIcon,
 } from "@heroicons/react/24/solid";
 import { useFullscreen } from "@hooks/useFullscreen";
-import { SyntheticEvent } from "react";
+import { SyntheticEvent, memo } from "react";
 import { useTranslation } from "react-i18next";
 
 function FullscreenButton() {
@@ -42,4 +42,4 @@ function FullscreenButton() {
   );
 }
 
-export default FullscreenButton;
+export default memo(FullscreenButton);

src/Components/MediaControls/PauseButton.tsx

@@ -1,6 +1,6 @@
 import { PauseIcon } from "@heroicons/react/24/solid";
 import { useAudio } from "@hooks/useAudio";
-import { SyntheticEvent } from "react";
+import { SyntheticEvent, memo } from "react";
 import { useTranslation } from "react-i18next";
 
 function PauseButton() {
@@ -26,4 +26,4 @@ function PauseButton() {
   );
 }
 
-export default PauseButton;
+export default memo(PauseButton);

src/Components/MediaControls/PlayButton.tsx

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

src/Components/MediaControls/SkipButton.tsx

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

src/Components/MediaControls/StopButton.tsx

@@ -1,7 +1,7 @@
 import { StopIcon } from "@heroicons/react/24/solid";
 import { useAudio } from "@hooks/useAudio";
 import { useTrackList } from "@hooks/useTrackList";
-import { SyntheticEvent } from "react";
+import { SyntheticEvent, memo } from "react";
 import { useTranslation } from "react-i18next";
 
 function StopButton() {
@@ -29,4 +29,4 @@ function StopButton() {
   );
 }
 
-export default StopButton;
+export default memo(StopButton);

src/Components/MediaPlayer.tsx

@@ -3,7 +3,7 @@ import { useTrackList } from "@hooks/useTrackList.js";
 import { AudioProvider } from "@providers/AudioProvider.js";
 import { FullscreenProvider } from "@providers/FullscreenProvider.js";
 import { Link } from "@tanstack/react-router";
-import { useState } from "react";
+import { memo, useMemo, useState } from "react";
 
 import AlbumArt from "./AlbumArt.js";
 import Fullscreen from "./MediaPlayer/Fullscreen.js";
@@ -14,7 +14,7 @@ import TitleInfo from "./TitleInfo.js";
 function MediaPlayer() {
   const { getCurrentTrack } = useTrackList();
 
-  const nowPlaying = getCurrentTrack();
+  const nowPlaying = useMemo(() => getCurrentTrack(), [getCurrentTrack]);
 
   const getInitialProgress = (song: Song | null) => {
     if (song?.isPodcast) {
@@ -29,6 +29,11 @@ function MediaPlayer() {
     getInitialProgress(nowPlaying),
   );
 
+  const artwork = useMemo(
+    () => nowPlaying && <AlbumArt id={nowPlaying.coverArt} sizes={`100px`} />,
+    [nowPlaying],
+  );
+
   if (!nowPlaying) {
     return null;
   }
@@ -51,7 +56,7 @@ function MediaPlayer() {
                 to="/albums/$albumId"
                 params={{ albumId: nowPlaying.albumId }}
               >
-                <AlbumArt id={nowPlaying.coverArt} sizes={`100px`} />
+                {artwork}
               </Link>
             </div>
             <MediaInfo
@@ -71,4 +76,4 @@ function MediaPlayer() {
   );
 }
 
-export default MediaPlayer;
+export default memo(MediaPlayer);

src/Components/MediaPlayer/Fullscreen.tsx

@@ -1,6 +1,7 @@
 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";
 
@@ -119,4 +120,4 @@ function Fullscreen({ track, currentTime, duration }: FullscreenProps) {
   );
 }
 
-export default Fullscreen;
+export default memo(Fullscreen);

src/Components/MediaPlayer/MediaControls.tsx

@@ -1,4 +1,5 @@
 import { useAudio } from "@hooks/useAudio.js";
+import { memo } from "react";
 
 import FullscreenButton from "../MediaControls/FullscreenButton.js";
 import PauseButton from "../MediaControls/PauseButton.js";
@@ -27,4 +28,4 @@ function MediaControls() {
   );
 }
 
-export default MediaControls;
+export default memo(MediaControls);

src/Components/MediaPlayer/MediaInfo.tsx

@@ -1,4 +1,5 @@
 import type { Song } from "@api/types.js";
+import { memo } from "react";
 
 import TrackInfo from "../TrackInfo.js";
 import MediaControls from "./MediaControls.js";
@@ -26,4 +27,4 @@ function MediaInfo({ track, duration, currentTime }: Readonly<MediaInfoProps>) {
   );
 }
 
-export default MediaInfo;
+export default memo(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, useEffect } from "react";
+import { ReactNode, memo, useEffect } from "react";
 
 interface MediaSessionProps {
   track: Song;
@@ -47,4 +47,4 @@ function MediaSession({ track, children }: MediaSessionProps) {
   return children;
 }
 
-export default MediaSession;
+export default memo(MediaSession);

src/Components/Nav.tsx

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

src/Components/TitleInfo.tsx

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

src/Components/TrackInfo.tsx

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

src/Components/TrackList.tsx

@@ -2,7 +2,7 @@ import type { Songs } from "@api/types.js";
 import { AlbumProvider } from "@providers/AlbumProvider.js";
 import { VirtualItem, useVirtualizer } from "@tanstack/react-virtual";
 import classNames from "classnames";
-import { useRef } from "react";
+import { memo, useRef } from "react";
 import { useTranslation } from "react-i18next";
 
 import TrackListItem from "./TrackListItem.js";
@@ -74,4 +74,4 @@ function TrackList({ tracks, includeAdd = false }: Readonly<TrackListProps>) {
   );
 }
 
-export default TrackList;
+export default memo(TrackList);

src/Components/TrackListItem.tsx

@@ -2,7 +2,7 @@ import type { Song } from "@api/types.js";
 import { PlayIcon, PlusIcon } from "@heroicons/react/24/solid";
 import { useAlbumTracks } from "@hooks/useAlbumTracks.js";
 import { useTrackList } from "@hooks/useTrackList.js";
-import { SyntheticEvent } from "react";
+import { SyntheticEvent, memo, useCallback, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 
 import Duration from "./Duration.js";
@@ -29,11 +29,14 @@ function TrackListItem({
     setTrackList(tracks.slice(startingIndex));
   };
 
-  const add = (e: SyntheticEvent) => {
-    e.preventDefault();
+  const add = useCallback(
+    (e: SyntheticEvent) => {
+      e.preventDefault();
 
-    addTrack(track);
-  };
+      addTrack(track);
+    },
+    [addTrack, track],
+  );
 
   const playButton = (
     <button
@@ -51,20 +54,23 @@ function TrackListItem({
     </button>
   );
 
-  const addButton = (
-    <button
-      onClick={add}
-      className={`w-6 flex-shrink-0`}
-      aria-label={t("addTrack")}
-    >
-      <a
-        data-tooltip-id="tooltip"
-        data-tooltip-content={t("addTrack")}
-        data-tooltip-delay-show={1000}
+  const addButton = useMemo(
+    () => (
+      <button
+        onClick={add}
+        className={`w-6 flex-shrink-0`}
+        aria-label={t("addTrack")}
       >
-        <PlusIcon className={`w-6 md:w-full`} />
-      </a>
-    </button>
+        <a
+          data-tooltip-id="tooltip"
+          data-tooltip-content={t("addTrack")}
+          data-tooltip-delay-show={1000}
+        >
+          <PlusIcon className={`w-6 md:w-full`} />
+        </a>
+      </button>
+    ),
+    [add, t],
   );
 
   const nowPlayingIcon = (
@@ -104,4 +110,4 @@ function TrackListItem({
   );
 }
 
-export default TrackListItem;
+export default memo(TrackListItem);