From e542fcb8aa150634120be047bcc766f7dccd3362 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Tue, 8 Aug 2023 00:38:32 -0700
Subject: [PATCH] Memoize context values

---
 .../features/albums/routes/album-list-route.tsx       | 11 ++++++++++-
 .../album-artist-detail-top-songs-list-route.tsx      | 11 ++++++++---
 .../artists/routes/album-artist-list-route.tsx        | 11 +++++++++--
 .../features/playlists/routes/playlist-list-route.tsx | 11 +++++++++--
 4 files changed, 36 insertions(+), 8 deletions(-)

diff --git a/src/renderer/features/albums/routes/album-list-route.tsx b/src/renderer/features/albums/routes/album-list-route.tsx
index d80ade24..b345fb96 100644
--- a/src/renderer/features/albums/routes/album-list-route.tsx
+++ b/src/renderer/features/albums/routes/album-list-route.tsx
@@ -87,9 +87,18 @@ const AlbumListRoute = () => {
         [albumListFilter, customFilters, handlePlayQueueAdd, itemCount, server],
     );
 
+    const providerValue = useMemo(() => {
+        return {
+            customFilters,
+            handlePlay,
+            id: albumArtistId ?? undefined,
+            pageKey,
+        };
+    }, [albumArtistId, customFilters, handlePlay, pageKey]);
+
     return (
         <AnimatedPage>
-            <ListContext.Provider value={{ customFilters, handlePlay, id: albumArtistId, pageKey }}>
+            <ListContext.Provider value={providerValue}>
                 <AlbumListHeader
                     gridRef={gridRef}
                     itemCount={itemCount}
diff --git a/src/renderer/features/artists/routes/album-artist-detail-top-songs-list-route.tsx b/src/renderer/features/artists/routes/album-artist-detail-top-songs-list-route.tsx
index 3a1c5860..9a684765 100644
--- a/src/renderer/features/artists/routes/album-artist-detail-top-songs-list-route.tsx
+++ b/src/renderer/features/artists/routes/album-artist-detail-top-songs-list-route.tsx
@@ -1,4 +1,4 @@
-import { useRef } from 'react';
+import { useMemo, useRef } from 'react';
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
 import { useParams } from 'react-router';
 import { AlbumArtistDetailTopSongsListContent } from '/@/renderer/features/artists/components/album-artist-detail-top-songs-list-content';
@@ -29,11 +29,16 @@ const AlbumArtistDetailTopSongsListRoute = () => {
 
     const itemCount = topSongsQuery?.data?.items?.length || 0;
 
-    if (detailQuery.isLoading || topSongsQuery?.isLoading) return null;
+    const providerValue = useMemo(() => {
+        return {
+            id: albumArtistId,
+            pageKey,
+        };
+    }, [albumArtistId, pageKey]);
 
     return (
         <AnimatedPage>
-            <ListContext.Provider value={{ id: albumArtistId, pageKey }}>
+            <ListContext.Provider value={providerValue}>
                 <AlbumArtistDetailTopSongsListHeader
                     data={topSongsQuery?.data?.items || []}
                     itemCount={itemCount}
diff --git a/src/renderer/features/artists/routes/album-artist-list-route.tsx b/src/renderer/features/artists/routes/album-artist-list-route.tsx
index 059dc081..0f68bd57 100644
--- a/src/renderer/features/artists/routes/album-artist-list-route.tsx
+++ b/src/renderer/features/artists/routes/album-artist-list-route.tsx
@@ -1,5 +1,5 @@
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
-import { useRef } from 'react';
+import { useMemo, useRef } from 'react';
 import { useCurrentServer } from '../../../store/auth.store';
 import { useListFilterByKey } from '../../../store/list.store';
 import { LibraryItem } from '/@/renderer/api/types';
@@ -36,9 +36,16 @@ const AlbumArtistListRoute = () => {
             ? undefined
             : itemCountCheck.data?.totalRecordCount;
 
+    const providerValue = useMemo(() => {
+        return {
+            id: undefined,
+            pageKey,
+        };
+    }, [pageKey]);
+
     return (
         <AnimatedPage>
-            <ListContext.Provider value={{ id: undefined, pageKey }}>
+            <ListContext.Provider value={providerValue}>
                 <AlbumArtistListHeader
                     gridRef={gridRef}
                     itemCount={itemCount}
diff --git a/src/renderer/features/playlists/routes/playlist-list-route.tsx b/src/renderer/features/playlists/routes/playlist-list-route.tsx
index 00c46c12..86f9fc5f 100644
--- a/src/renderer/features/playlists/routes/playlist-list-route.tsx
+++ b/src/renderer/features/playlists/routes/playlist-list-route.tsx
@@ -1,5 +1,5 @@
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
-import { useRef } from 'react';
+import { useMemo, useRef } from 'react';
 import { useParams } from 'react-router';
 import { PlaylistListSort, SortOrder } from '/@/renderer/api/types';
 import { VirtualInfiniteGridRef } from '/@/renderer/components/virtual-grid';
@@ -38,9 +38,16 @@ const PlaylistListRoute = () => {
             ? undefined
             : itemCountCheck.data?.totalRecordCount;
 
+    const providerValue = useMemo(() => {
+        return {
+            id: playlistId,
+            pageKey,
+        };
+    }, [playlistId]);
+
     return (
         <AnimatedPage>
-            <ListContext.Provider value={{ id: playlistId, pageKey }}>
+            <ListContext.Provider value={providerValue}>
                 <PlaylistListHeader
                     gridRef={gridRef}
                     itemCount={itemCount}