fix: combine sorting and first message received logging logic to eliminate double effect run issue

Author: 1egoman

packages/react/src/hooks/useSessionMessages.ts

@@ -112,49 +112,41 @@ export function useSessionMessages(session?: UseSessionReturn): UseSessionMessag
     return merged;
   }, [transcriptionMessages, chat.chatMessages]);
 
-  const [messageFirstReceivedTimeMap, setMessageFirstReceivedTime] = React.useState(
+  const messageFirstReceivedTimeMapRef = React.useRef(
     new Map<ReceivedMessage['id'], Date>(),
   );
-  React.useEffect(() => {
-    setMessageFirstReceivedTime((oldMap) => {
-      const newMap = new Map(oldMap);
+  const sortedReceivedMessages = React.useMemo(() => {
+    const now = new Date();
+    for (const message of receivedMessages) {
+      if (messageFirstReceivedTimeMapRef.current.has(message.id)) {
+        continue;
+      }
 
-      const now = new Date();
-      for (const message of receivedMessages) {
-        if (newMap.has(message.id)) {
-          continue;
-        }
+      messageFirstReceivedTimeMapRef.current.set(message.id, now);
+    }
 
-        newMap.set(message.id, now);
+    return receivedMessages.sort((a, b) => {
+      const aFirstReceivedAt = messageFirstReceivedTimeMapRef.current.get(a.id);
+      const bFirstReceivedAt = messageFirstReceivedTimeMapRef.current.get(b.id);
+      if (typeof aFirstReceivedAt === 'undefined' || typeof bFirstReceivedAt === 'undefined') {
+        return 0;
       }
 
-      return newMap;
+      return aFirstReceivedAt.getTime() - bFirstReceivedAt.getTime();
     });
   }, [receivedMessages]);
 
   const previouslyReceivedMessageIdsRef = React.useRef(new Set());
   React.useEffect(() => {
-    for (const message of receivedMessages) {
+    for (const message of sortedReceivedMessages) {
       if (previouslyReceivedMessageIdsRef.current.has(message.id)) {
         continue;
       }
 
       previouslyReceivedMessageIdsRef.current.add(message.id);
       emitter.emit(MessagesEvent.MessageReceived, message);
     }
-  }, [receivedMessages]);
-
-  const sortedReceivedMessages = React.useMemo(() => {
-    return receivedMessages.sort((a, b) => {
-      const aFirstReceivedAt = messageFirstReceivedTimeMap.get(a.id);
-      const bFirstReceivedAt = messageFirstReceivedTimeMap.get(b.id);
-      if (typeof aFirstReceivedAt === 'undefined' || typeof bFirstReceivedAt === 'undefined') {
-        return 0;
-      }
-
-      return aFirstReceivedAt.getTime() - bFirstReceivedAt.getTime();
-    });
-  }, [receivedMessages, messageFirstReceivedTimeMap]);
+  }, [sortedReceivedMessages]);
 
   return React.useMemo(
     () => ({