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; onToggleSelection: (songId: string) => void;
showCheckbox: boolean; showCheckbox: boolean;
}>(({ song, isSelected, isHighlighted, onSelect, onToggleSelection, showCheckbox }) => { }>(({ song, isSelected, isHighlighted, onSelect, onToggleSelection, showCheckbox }) => {
// Memoize the formatted duration to prevent recalculation
const formattedDuration = useMemo(() => formatDuration(song.totalTime || ''), [song.totalTime]);
const handleClick = useCallback(() => { const handleClick = useCallback(() => {
onSelect(song); onSelect(song);
}, [onSelect, song]); }, [onSelect, song]);
@ -89,7 +91,7 @@ const SongItem = memo<{
</Box> </Box>
<Box textAlign="right" ml={2}> <Box textAlign="right" ml={2}>
<Text fontSize="xs" color="gray.500"> <Text fontSize="xs" color="gray.500">
{formatDuration(song.totalTime || '')} {formattedDuration}
</Text> </Text>
<Text fontSize="xs" color="gray.600"> <Text fontSize="xs" color="gray.600">
{song.averageBpm} BPM {song.averageBpm} BPM
@ -213,7 +215,7 @@ export const PaginatedSongList: React.FC<PaginatedSongListProps> = memo(({
showCheckbox={selectedSongs.size > 0 || depth === 0} 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 // Use total playlist duration if available, otherwise calculate from current songs
const totalDuration = useMemo(() => { const totalDuration = useMemo(() => {