Perf-1

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' ? (
 						<XStack
@@ -69,7 +58,7 @@ export default function Albums({
 							<Text>{album.toUpperCase()}</Text>
 						</XStack>
 					) : typeof album === 'number' ? null : typeof album === 'object' ? (
-						<MemoizedItem
+						<ItemRow
 							item={album}
 							queueName={album.Name ?? 'Unknown Album'}
 							navigation={navigation}

src/components/Artists/component.tsx

@@ -32,22 +32,6 @@ export default function Artists({
 
 	const pendingLetterRef = useRef<string | null>(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={() => <Separator />}
 				data={artists}
 				refreshControl={
@@ -150,7 +139,7 @@ export default function Artists({
 							</XStack>
 						)
 					) : typeof artist === 'number' ? null : typeof artist === 'object' ? (
-						<MemoizedItem
+						<ItemRow
 							circular
 							item={artist}
 							queueName={artist.Name ?? 'Unknown Artist'}

src/components/Library/components/albums-tab.tsx

@@ -29,4 +29,4 @@ function AlbumsTab(): React.JSX.Element {
 	)
 }
 
-export default React.memo(AlbumsTab)
+export default AlbumsTab

src/components/Library/components/artists-tab.tsx

@@ -20,4 +20,4 @@ function ArtistsTab(): React.JSX.Element {
 	)
 }
 
-export default React.memo(ArtistsTab)
+export default ArtistsTab

src/components/Library/components/playlists-tab.tsx

@@ -31,4 +31,4 @@ function PlaylistsTab(): React.JSX.Element {
 	)
 }
 
-export default React.memo(PlaylistsTab)
+export default PlaylistsTab

src/components/Library/components/tracks-tab.tsx

@@ -27,4 +27,4 @@ function TracksTab(): React.JSX.Element {
 	)
 }
 
-export default React.memo(TracksTab)
+export default TracksTab

src/components/Library/tab-bar.tsx

@@ -94,4 +94,4 @@ function LibraryTabBar(props: MaterialTopTabBarProps) {
 	)
 }
 
-export default React.memo(LibraryTabBar)
+export default LibraryTabBar