Memoize context values

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}

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}

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}

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}