Makussu/subtracks
1
0
Fork 0
mirror of https://github.com/austinried/subtracks.git synced 2026-02-10 15:02:42 +01:00
Code Issues Packages Projects Releases Wiki Activity

fixed perf issue related to too many rerenders

Browse Source 
rerenders were caused by strict equality check on object/array picks
switched artistInfo to new store
updated zustand and fixed deprecation warnings
This commit is contained in:
austinried
2022-03-19 09:52:01 +09:00
parent 47c65ea8cb
commit 13af6555d3
15 changed files with 108 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
app/hooks/cache.ts
View File

@@ -1,9 +1,7 @@
import { CacheImageSize, CacheItemTypeKey } from '@app/models/cache'
import { ArtistInfo } from '@app/models/music'
import { selectCache } from '@app/state/cache'
import { selectMusic } from '@app/state/music'
import { selectSettings } from '@app/state/settings'
import { useStore, Store } from '@app/state/store'
import { Store, useStore, useStoreDeep } from '@app/state/store'
import { useCallback, useEffect } from 'react'
const useFileRequest = (key: CacheItemTypeKey, id: string) => {
@@ -61,28 +59,25 @@ export const useCoverArtFile = (coverArt = '-1', size: CacheImageSize = 'thumbna
export const useArtistArtFile = (artistId: string, size: CacheImageSize = 'thumbnail') => {
const type: CacheItemTypeKey = size === 'original' ? 'artistArt' : 'artistArtThumb'
const fetchArtistInfo = useStore(selectMusic.fetchArtistInfo)
const fetchArtistInfo = useStore(store => store.fetchLibraryArtistInfo)
const artistInfo = useStoreDeep(store => store.entities.artistInfo[artistId])
const { file, request } = useFileRequest(type, artistId)
const cacheItem = useStore(selectCache.cacheItem)
useEffect(() => {
if (!artistInfo) {
fetchArtistInfo(artistId)
return
}
if (!file) {
cacheItem(type, artistId, async () => {
let artistInfo: ArtistInfo | undefined
const cachedArtistInfo = useStore.getState().artistInfo[artistId]
if (cachedArtistInfo) {
artistInfo = cachedArtistInfo
} else {
artistInfo = await fetchArtistInfo(artistId)
}
return type === 'artistArtThumb' ? artistInfo?.smallImageUrl : artistInfo?.largeImageUrl
})
}
// intentionally leaving file out so it doesn't re-render if the request fails
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [artistId, cacheItem, fetchArtistInfo, type])
}, [artistId, cacheItem, fetchArtistInfo, type, artistInfo])
return { file, request }
}

6
app/hooks/music.ts
View File

@@ -1,10 +1,10 @@
import { selectMusic } from '@app/state/music'
import { Store, useStore } from '@app/state/store'
import { Store, useStore, useStoreDeep } from '@app/state/store'
import { useCallback, useEffect } from 'react'
export const useArtistInfo = (id: string) => {
const artistInfo = useStore(useCallback((state: Store) => state.artistInfo[id], [id]))
const fetchArtistInfo = useStore(selectMusic.fetchArtistInfo)
const artistInfo = useStoreDeep(useCallback(store => store.entities.artistInfo[id], [id]))
const fetchArtistInfo = useStore(store => store.fetchLibraryArtistInfo)
useEffect(() => {
if (!artistInfo) {