use ids for lists, pull state later

app/screens/Home.tsx

@@ -4,13 +4,11 @@ import GradientScrollView from '@app/components/GradientScrollView'
 import Header from '@app/components/Header'
 import NothingHere from '@app/components/NothingHere'
 import { useActiveServerRefresh } from '@app/hooks/server'
-import { Album } from '@app/models/library'
 import { selectSettings } from '@app/state/settings'
 import { useStore, useStoreDeep } from '@app/state/store'
 import colors from '@app/styles/colors'
 import font from '@app/styles/font'
 import { GetAlbumList2TypeBase, GetAlbumListType } from '@app/subsonic/params'
-import { mapById } from '@app/util/state'
 import { useNavigation } from '@react-navigation/native'
 import equal from 'fast-deep-equal/es6/react'
 import produce from 'immer'
@@ -26,9 +24,14 @@ const titles: { [key in GetAlbumListType]?: string } = {
 }
 
 const AlbumItem = React.memo<{
-  album: Album
-}>(({ album }) => {
+  id: string
+}>(({ id }) => {
   const navigation = useNavigation()
+  const album = useStoreDeep(useCallback(store => store.entities.albums[id], [id]))
+
+  if (!album) {
+    return <></>
+  }
 
   return (
     <AlbumContextPressable
@@ -55,7 +58,6 @@ const Category = React.memo<{
   type: string
 }>(({ type }) => {
   const list = useHomeStoreDeep(useCallback(store => store.lists[type] || [], [type]))
-  const albums = useStoreDeep(useCallback(store => mapById(store.entities.albums, list), [list]))
 
   const Albums = () => (
     <ScrollView
@@ -64,8 +66,8 @@ const Category = React.memo<{
       overScrollMode={'never'}
       style={styles.artScroll}
       contentContainerStyle={styles.artScrollContent}>
-      {albums.map(album => (
-        <AlbumItem key={album.id} album={album} />
+      {list.map(id => (
+        <AlbumItem key={id} id={id} />
       ))}
     </ScrollView>
   )
@@ -79,7 +81,7 @@ const Category = React.memo<{
   return (
     <View style={styles.category}>
       <Header style={styles.header}>{titles[type as GetAlbumListType] || ''}</Header>
-      {albums.length > 0 ? <Albums /> : <Nothing />}
+      {list.length > 0 ? <Albums /> : <Nothing />}
     </View>
   )
 })