perf: throttle certain channel preview updates to avoid stressing the state update queue

Author: isekovanic

package/src/components/ChannelPreview/hooks/useChannelPreviewData.ts

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react';
+import { type SetStateAction, useEffect, useMemo, useState } from 'react';
 
 import throttle from 'lodash/throttle';
 import type { Channel, ChannelState, Event, MessageResponse, StreamChat } from 'stream-chat';
@@ -8,16 +8,37 @@ import { useIsChannelMuted } from './useIsChannelMuted';
 import { useLatestMessagePreview } from './useLatestMessagePreview';
 
 import { useChannelsContext } from '../../../contexts';
+import { useStableCallback } from '../../../hooks';
+
+const setLastMessageThrottleTimeout = 500;
+const setLastMessageThrottleOptions = { leading: true, trailing: true };
+
+const refreshUnreadCountThrottleTimeout = 400;
+const refreshUnreadCountThrottleOptions = setLastMessageThrottleOptions;
+
+type LastMessageType = ReturnType<ChannelState['formatMessage']> | MessageResponse;
 
 export const useChannelPreviewData = (
   channel: Channel,
   client: StreamChat,
   forceUpdateOverride?: number,
 ) => {
   const [forceUpdate, setForceUpdate] = useState(0);
-  const [lastMessage, setLastMessage] = useState<
-    ReturnType<ChannelState['formatMessage']> | MessageResponse
-  >(channel.state.messages[channel.state.messages.length - 1]);
+  const [lastMessage, setLastMessageInner] = useState<LastMessageType>(
+    () => channel.state.messages[channel.state.messages.length - 1],
+  );
+  const throttledSetLastMessage = useMemo(
+    () =>
+      throttle(
+        (newLastMessage: SetStateAction<LastMessageType>) => setLastMessageInner(newLastMessage),
+        setLastMessageThrottleTimeout,
+        setLastMessageThrottleOptions,
+      ),
+    [],
+  );
+  const setLastMessage = useStableCallback((newLastMessage: SetStateAction<LastMessageType>) =>
+    throttledSetLastMessage(newLastMessage),
+  );
   const [unread, setUnread] = useState(channel.countUnread());
   const { muted } = useIsChannelMuted(channel);
   const { forceUpdate: contextForceUpdate } = useChannelsContext();
@@ -26,29 +47,50 @@ export const useChannelPreviewData = (
   const channelLastMessage = channel.lastMessage();
   const channelLastMessageString = `${channelLastMessage?.id}${channelLastMessage?.updated_at}`;
 
+  const refreshUnreadCount = useMemo(
+    () =>
+      throttle(
+        () => {
+          if (muted) {
+            setUnread(0);
+          } else {
+            setUnread(channel.countUnread());
+          }
+        },
+        refreshUnreadCountThrottleTimeout,
+        refreshUnreadCountThrottleOptions,
+      ),
+    [channel, muted],
+  );
+
   useEffect(() => {
     const unsubscribe = channel.messageComposer.registerDraftEventSubscriptions();
     return () => unsubscribe();
   }, [channel.messageComposer]);
 
   useEffect(() => {
     const { unsubscribe } = client.on('notification.mark_read', () => {
-      setUnread(channel.countUnread());
+      refreshUnreadCount();
     });
     return unsubscribe;
-  }, [channel, client]);
+  }, [client, refreshUnreadCount]);
 
   useEffect(() => {
-    if (
+    setLastMessage((prevLastMessage) =>
       channelLastMessage &&
-      (channelLastMessage.id !== lastMessage?.id ||
-        channelLastMessage.updated_at !== lastMessage?.updated_at)
-    ) {
-      setLastMessage(channelLastMessage);
-    }
-    const newUnreadCount = channel.countUnread();
-    setUnread(newUnreadCount);
-  }, [channel, channelLastMessage, channelLastMessageString, channelListForceUpdate, lastMessage]);
+      (channelLastMessage.id !== prevLastMessage?.id ||
+        channelLastMessage.updated_at !== prevLastMessage?.updated_at)
+        ? channelLastMessage
+        : prevLastMessage,
+    );
+    refreshUnreadCount();
+  }, [
+    channelLastMessage,
+    channelLastMessageString,
+    channelListForceUpdate,
+    setLastMessage,
+    refreshUnreadCount,
+  ]);
 
   /**
    * This effect listens for the `notification.mark_read` event and sets the unread count to 0
@@ -91,18 +133,6 @@ export const useChannelPreviewData = (
     return unsubscribe;
   }, [client, channel]);
 
-  const refreshUnreadCount = useMemo(
-    () =>
-      throttle(() => {
-        if (muted) {
-          setUnread(0);
-        } else {
-          setUnread(channel.countUnread());
-        }
-      }, 400),
-    [channel, muted],
-  );
-
   /**
    * This effect listens for the `message.new`, `message.updated`, `message.deleted`, `message.undeleted`, and `channel.truncated` events
    */
@@ -118,7 +148,7 @@ export const useChannelPreviewData = (
       const message = event.message;
       if (message && (!message.parent_id || message.show_in_channel)) {
         setLastMessage(message);
-        setUnread(channel.countUnread());
+        refreshUnreadCount();
       }
     };
 
@@ -140,7 +170,7 @@ export const useChannelPreviewData = (
     ];
 
     return () => listeners.forEach((l) => l.unsubscribe());
-  }, [channel, refreshUnreadCount, forceUpdate, channelListForceUpdate]);
+  }, [channel, refreshUnreadCount, forceUpdate, channelListForceUpdate, setLastMessage]);
 
   const latestMessagePreview = useLatestMessagePreview(channel, forceUpdate, lastMessage);