diff --git a/src/components/Albums/component.tsx b/src/components/Albums/component.tsx index e7fc4591..319bc6ec 100644 --- a/src/components/Albums/component.tsx +++ b/src/components/Albums/component.tsx @@ -19,24 +19,8 @@ export default function Albums({ }: AlbumsProps): React.JSX.Element { const { numberOfColumns } = useDisplayContext() - const MemoizedItem = React.memo(ItemRow) - const itemHeight = getToken('$6') - // Memoize key extraction function for better performance - const keyExtractor = React.useCallback( - (item: string | number | BaseItemDto) => - typeof item === 'string' ? item : typeof item === 'number' ? item.toString() : item.Id!, - [], - ) - - // Memoize getItemType for FlashList optimization - const getItemType = React.useCallback((item: string | number | BaseItemDto) => { - if (typeof item === 'string') return 'header' - if (typeof item === 'number') return 'number' - return 'album' - }, []) - // Memoize expensive stickyHeaderIndices calculation to prevent unnecessary re-computations const stickyHeaderIndices = React.useMemo(() => { if (!showAlphabeticalSelector || !albums) return [] @@ -54,8 +38,13 @@ export default function Albums({ }} contentInsetAdjustmentBehavior='automatic' data={albums ?? []} - keyExtractor={keyExtractor} - getItemType={getItemType} + keyExtractor={(item) => + typeof item === 'string' + ? item + : typeof item === 'number' + ? item.toString() + : item.Id! + } renderItem={({ index, item: album }) => typeof album === 'string' ? ( {album.toUpperCase()} ) : typeof album === 'number' ? null : typeof album === 'object' ? ( - (null) - const MemoizedItem = React.memo(ItemRow) - - // Memoize key extraction function for better performance - const keyExtractor = React.useCallback( - (item: string | number | BaseItemDto) => - typeof item === 'string' ? item : typeof item === 'number' ? item.toString() : item.Id!, - [], - ) - - // Memoize getItemType for FlashList optimization - const getItemType = React.useCallback((item: string | number | BaseItemDto) => { - if (typeof item === 'string') return 'header' - if (typeof item === 'number') return 'number' - return 'artist' - }, []) - const alphabeticalSelectorCallback = async (letter: string) => { console.debug(`Alphabetical Selector Callback: ${letter}`) @@ -119,8 +103,13 @@ export default function Artists({ }} contentInsetAdjustmentBehavior='automatic' extraData={isFavorites} - keyExtractor={keyExtractor} - getItemType={getItemType} + keyExtractor={(item) => + typeof item === 'string' + ? item + : typeof item === 'number' + ? item.toString() + : item.Id! + } ItemSeparatorComponent={() => } data={artists} refreshControl={ @@ -150,7 +139,7 @@ export default function Artists({ ) ) : typeof artist === 'number' ? null : typeof artist === 'object' ? ( -