master/rekordbox-viewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Geert Rademakes 2025-08-06 10:57:25 +02:00
parent e2ae3bd6d8
commit c9541cffee
1 changed files with 4 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/frontend/src/components/PaginatedSongList.tsx
View File

@ -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(() => {