chore: Fix some O(n^2) behavior

Author: cyanChill

mobile/src/data/album/queries.ts

@@ -18,8 +18,7 @@ export function useAlbumForScreen(albumId: string) {
   return useQuery({
     ...q.albums.detail(albumId),
     select: ({ name, artistsKey, artwork, isFavorite, tracks, year }) => {
-      const albumArtists = AlbumArtistsKey.deconstruct(artistsKey);
-
+      const albumArtists = new Set(AlbumArtistsKey.deconstruct(artistsKey));
       return {
         name,
         imageSource: artwork,
@@ -34,15 +33,15 @@ export function useAlbumForScreen(albumId: string) {
         tracks: tracks.map(({ name: title, duration, artists, ...other }) => {
           let description = formatSeconds(duration);
           if (Array.isArray(artists)) {
-            const diff = artists.filter((name) => !albumArtists.includes(name));
+            const diff = artists.filter((name) => !albumArtists.has(name));
             if (diff.length > 0) description += ` • ${diff.join(", ")}`;
           }
 
           const { artwork: _, albumName: _1, ...rest } = other;
           return { ...rest, title, description, imageSource: null };
         }),
 
-        artists: albumArtists,
+        artists: [...albumArtists],
         isFavorite,
       };
     },

mobile/src/navigation/screens/playlists/components/ModifyViewBase.tsx

@@ -54,7 +54,8 @@ export function ModifyPlaylistBase(props: {
   // Exclude `FavoritesPlaylistKey` as we don't return it when fetching all
   // playlists & don't check it in `sanitizePlaylistName`.
   const usedNames = useMemo(
-    () => [...props.referenceData.playlistNames!, FavoritesPlaylistKey],
+    () =>
+      new Set([...props.referenceData.playlistNames!, FavoritesPlaylistKey]),
     [props.referenceData.playlistNames],
   );
 
@@ -80,7 +81,7 @@ export function ModifyPlaylistBase(props: {
             const sanitized = sanitizePlaylistName(name);
             isUnique =
               props.initialData?.name === sanitized ||
-              !usedNames.includes(sanitized);
+              !usedNames.has(sanitized);
           } catch {}
           return isUnique;
         }}

mobile/src/navigation/screens/tracks/sheets/TrackToPlaylistsSheet.tsx

@@ -1,3 +1,5 @@
+import { useMemo } from "react";
+
 import { usePlaylistsNames } from "~/data/playlist/queries";
 import {
   useToggleTrackInPlaylist,
@@ -22,6 +24,8 @@ export function TrackToPlaylistsSheet({ id }: { id: string }) {
   const toggleInPlaylist = useToggleTrackInPlaylist(id);
   const sheetListHandlers = useEnableSheetScroll();
 
+  const inListSet = useMemo(() => new Set(inList ?? []), [inList]);
+
   return (
     <DetachedSheet
       globalKey={GLOBAL_SHEET_KEY}
@@ -31,21 +35,18 @@ export function TrackToPlaylistsSheet({ id }: { id: string }) {
       <FlatList
         data={playlistsNames}
         keyExtractor={(name) => name}
-        extraData={inList}
-        renderItem={({ item: name }) => {
-          const selected = inList?.includes(name) ?? false;
-          return (
-            <CheckboxField
-              checked={selected}
-              onCheck={() => mutateGuard(toggleInPlaylist, name)}
-              className="mb-2"
-            >
-              <Marquee color="surfaceBright">
-                <StyledText>{name}</StyledText>
-              </Marquee>
-            </CheckboxField>
-          );
-        }}
+        extraData={inListSet}
+        renderItem={({ item: name }) => (
+          <CheckboxField
+            checked={inListSet.has(name)}
+            onCheck={() => mutateGuard(toggleInPlaylist, name)}
+            className="mb-2"
+          >
+            <Marquee color="surfaceBright">
+              <StyledText>{name}</StyledText>
+            </Marquee>
+          </CheckboxField>
+        )}
         getItemLayout={getItemLayout}
         ListEmptyComponent={
           <ContentPlaceholder errMsgKey="err.msg.noPlaylists" />

mobile/src/utils/object.ts

@@ -49,8 +49,9 @@ export function pickKeys<T extends Record<PropertyKey, any>, K extends keyof T>(
   obj: T,
   keys: readonly K[],
 ) {
+  const keySet = new Set(keys);
   return Object.fromEntries(
-    Object.entries(obj).filter(([key, _val]) => keys.includes(key as K)),
+    Object.entries(obj).filter(([key, _val]) => keySet.has(key as K)),
   ) as Pick<T, K>;
 }
 
@@ -59,7 +60,8 @@ export function omitKeys<T extends Record<PropertyKey, any>, K extends keyof T>(
   obj: T,
   keys: readonly K[],
 ) {
+  const keySet = new Set(keys);
   return Object.fromEntries(
-    Object.entries(obj).filter(([key, _val]) => !keys.includes(key as K)),
+    Object.entries(obj).filter(([key, _val]) => !keySet.has(key as K)),
   ) as Omit<T, K>;
 }