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

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