From c9541cffee9a603face106a3c2d71853567dd775 Mon Sep 17 00:00:00 2001
From: Geert Rademakes <g26107@eon.com>
Date: Wed, 6 Aug 2025 10:57:25 +0200
Subject: [PATCH] perf: Optimize song selection to fix 711ms click handler
 delay - Memoize formatted duration in SongItem to prevent recalculation -
 Remove handleSongSelect from songItems useMemo dependencies - Optimize
 SongItem component to prevent unnecessary re-renders - Should improve song
 selection responsiveness

---
 packages/frontend/src/components/PaginatedSongList.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/components/PaginatedSongList.tsx b/packages/frontend/src/components/PaginatedSongList.tsx
index 8b9b143..3100963 100644
--- a/packages/frontend/src/components/PaginatedSongList.tsx
+++ b/packages/frontend/src/components/PaginatedSongList.tsx
@@ -50,6 +50,8 @@ const SongItem = memo<{
   onToggleSelection: (songId: string) => void;
   showCheckbox: boolean;
 }>(({ song, isSelected, isHighlighted, onSelect, onToggleSelection, showCheckbox }) => {
+  // Memoize the formatted duration to prevent recalculation
+  const formattedDuration = useMemo(() => formatDuration(song.totalTime || ''), [song.totalTime]);
   const handleClick = useCallback(() => {
     onSelect(song);
   }, [onSelect, song]);
@@ -89,7 +91,7 @@ const SongItem = memo<{
       </Box>
       <Box textAlign="right" ml={2}>
         <Text fontSize="xs" color="gray.500">
-          {formatDuration(song.totalTime || '')}
+          {formattedDuration}
         </Text>
         <Text fontSize="xs" color="gray.600">
           {song.averageBpm} BPM
@@ -213,7 +215,7 @@ export const PaginatedSongList: React.FC<PaginatedSongListProps> = memo(({
         showCheckbox={selectedSongs.size > 0 || depth === 0}
       />
     ));
-  }, [songs, selectedSongs, selectedSongId, handleSongSelect, toggleSelection, depth]);
+  }, [songs, selectedSongs, selectedSongId, toggleSelection, depth]); // Removed handleSongSelect since it's already memoized
 
   // Use total playlist duration if available, otherwise calculate from current songs
   const totalDuration = useMemo(() => {