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 } }); }