fix(27-01): add ignore flag to prevent unmount state updates

- Add let ignore = false at start of duration fetch useEffect
- Check ignore flag after async jamClient call
- Add cleanup function that sets ignore = true
- Prevents 'state update on unmounted component' React warnings
  when closing backing track popup quickly
This commit is contained in:
Nuwan 2026-02-26 17:20:35 +05:30
parent d958b26008
commit bba12ac905
1 changed files with 21 additions and 6 deletions

View File

@ -88,6 +88,8 @@ const JKSessionBackingTrackPlayer = ({
}, []); }, []);
useEffect(() => { useEffect(() => {
let ignore = false;
// For popup mode, treat as always "open" since the popup window itself indicates open state // For popup mode, treat as always "open" since the popup window itself indicates open state
const shouldInitialize = (isOpen || isPopup) && backingTrack && jamClient; const shouldInitialize = (isOpen || isPopup) && backingTrack && jamClient;
@ -99,16 +101,23 @@ const JKSessionBackingTrackPlayer = ({
// Fetch and set duration immediately when track loads (async) // Fetch and set duration immediately when track loads (async)
const fetchDuration = async () => { const fetchDuration = async () => {
if (ignore) return;
setIsLoadingDuration(true); setIsLoadingDuration(true);
try { try {
if (!jamClient) { if (!jamClient) {
handleError('general', 'Audio engine not available', null); if (!ignore) {
setIsLoadingDuration(false); handleError('general', 'Audio engine not available', null);
setIsLoadingDuration(false);
}
return; return;
} }
const durationInMs = await jamClient.SessionGetTracksPlayDurationMs(); const durationInMs = await jamClient.SessionGetTracksPlayDurationMs();
// Check ignore AFTER async operation
if (ignore) return;
// Convert string to number (jamClient returns string values) // Convert string to number (jamClient returns string values)
const validDuration = parseInt(durationInMs, 10) || 0; const validDuration = parseInt(durationInMs, 10) || 0;
@ -131,15 +140,21 @@ const JKSessionBackingTrackPlayer = ({
clearError(); // Clear any previous errors clearError(); // Clear any previous errors
setIsLoadingDuration(false); setIsLoadingDuration(false);
} catch (error) { } catch (error) {
handleError('file', 'Failed to load track duration', error); if (!ignore) {
setDuration('0:00'); handleError('file', 'Failed to load track duration', error);
setDurationMs(0); setDuration('0:00');
setIsLoadingDuration(false); setDurationMs(0);
setIsLoadingDuration(false);
}
} }
}; };
fetchDuration(); fetchDuration();
} }
return () => {
ignore = true;
};
}, [isOpen, isPopup, backingTrack, jamClient, handleError, formatTime, clearError]); }, [isOpen, isPopup, backingTrack, jamClient, handleError, formatTime, clearError]);
// Playback monitoring with visibility-aware polling // Playback monitoring with visibility-aware polling