fix: Prevent infinite scroll from loading previous playlist songs - Add refs to store current playlist and search query values - Fix stale closure issue in loadPage function - Ensure infinite scroll uses current playlist, not cached values - Fixes race condition when switching playlists and scrolling

This commit is contained in:
Geert Rademakes 2025-08-06 10:39:51 +02:00
parent 535dc16d2c
commit 08de2afa0e

View File

@ -23,6 +23,7 @@ export const usePaginatedSongs = (options: UsePaginatedSongsOptions = {}) => {
const loadingRef = useRef(false);
const currentPlaylistRef = useRef(playlistName);
const currentSearchQueryRef = useRef(searchQuery);
const abortControllerRef = useRef<AbortController | null>(null);
// Cleanup function to prevent memory leaks
@ -38,8 +39,8 @@ export const usePaginatedSongs = (options: UsePaginatedSongsOptions = {}) => {
const loadPage = useCallback(async (page: number, search?: string, targetPlaylist?: string) => {
if (loadingRef.current) return;
const searchToUse = search ?? searchQuery;
const playlistToUse = targetPlaylist ?? playlistName;
const searchToUse = search ?? currentSearchQueryRef.current;
const playlistToUse = targetPlaylist ?? currentPlaylistRef.current;
// Cleanup previous request
cleanup();
@ -133,6 +134,15 @@ export const usePaginatedSongs = (options: UsePaginatedSongsOptions = {}) => {
};
}, []);
// Update refs when values change
useEffect(() => {
currentPlaylistRef.current = playlistName;
}, [playlistName]);
useEffect(() => {
currentSearchQueryRef.current = searchQuery;
}, [searchQuery]);
// Handle playlist changes
useEffect(() => {
if (currentPlaylistRef.current !== playlistName) {