From 2cf1c2cf983b35c6e6f424dc7f5cca2c7fca2eca Mon Sep 17 00:00:00 2001 From: Nuwan Date: Sun, 8 Feb 2026 21:51:04 +0530 Subject: [PATCH] fix(22-01): improve callback cleanup reliability with useRef - Add registeredCallbacksRef alongside registeredCallbacks state - Update unregisterMessageCallbacks to read from ref for cleanup - Store callbacks to both state and ref during registration - Ensures cleanup works reliably on all exit paths (browser close, navigation) --- jam-ui/src/components/client/JKSessionScreen.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/jam-ui/src/components/client/JKSessionScreen.js b/jam-ui/src/components/client/JKSessionScreen.js index 907380749..1937ef68c 100644 --- a/jam-ui/src/components/client/JKSessionScreen.js +++ b/jam-ui/src/components/client/JKSessionScreen.js @@ -291,14 +291,18 @@ const JKSessionScreen = () => { // Store references to registered message callbacks for cleanup const [registeredCallbacks, setRegisteredCallbacks] = useState([]); + const registeredCallbacksRef = useRef([]); // Function to unregister message callbacks + // Uses ref for cleanup to avoid stale closure issues when component unmounts const unregisterMessageCallbacks = useCallback(() => { - registeredCallbacks.forEach(({ type, callback }) => { + const callbacks = registeredCallbacksRef.current; + callbacks.forEach(({ type, callback }) => { unregisterMessageCallback(type, callback); }); + registeredCallbacksRef.current = []; setRegisteredCallbacks([]); - }, [registeredCallbacks, unregisterMessageCallback]); + }, [unregisterMessageCallback]); // Fetch session data when URL sessionId changes useEffect(() => { @@ -625,8 +629,9 @@ const JKSessionScreen = () => { registerMessageCallback(type, callback); }); - // Store registered callbacks for cleanup + // Store registered callbacks for cleanup (both state and ref for reliable cleanup) setRegisteredCallbacks(callbacksToRegister); + registeredCallbacksRef.current = callbacksToRegister; //TODO: revist the logic in following commented section //if (document) { $(document).trigger(EVENTS.SESSION_STARTED, { session: { id: this.currentSessionId, lesson_session: response.lesson_session } }); }