fix(VirtualizedMessageList): use memoized values as hook dependencies directly

src/components/ChannelList/hooks/usePaginatedChannels.ts

@@ -26,6 +26,7 @@ export const usePaginatedChannels = <
   const [channels, setChannels] = useState<Array<Channel<StreamChatGenerics>>>([]);
   const [hasNextPage, setHasNextPage] = useState(true);
 
+  // memoize props
   const filterString = useMemo(() => JSON.stringify(filters), [filters]);
   const sortString = useMemo(() => JSON.stringify(sort), [sort]);
 

src/components/MessageList/VirtualizedMessageList.tsx

@@ -196,7 +196,7 @@ const VirtualizedMessageListWithContext = <
   const groupStylesFn = groupStyles || getGroupStyles;
   const messageGroupStyles = useMemo(
     () =>
-      processedMessages.reduce((acc, message, i) => {
+      processedMessages.reduce<Record<string, GroupStyle>>((acc, message, i) => {
         const style = groupStylesFn(
           message,
           processedMessages[i - 1],
@@ -205,7 +205,8 @@ const VirtualizedMessageListWithContext = <
         );
         if (style) acc[message.id] = style;
         return acc;
-      }, {} as Record<string, GroupStyle>),
+      }, {}),
+    // processedMessages were incorrectly rebuilt with a new object identity at some point, hence the .length usage
     [processedMessages.length, shouldGroupByUser],
   );
 
@@ -234,6 +235,7 @@ const VirtualizedMessageListWithContext = <
     virtuoso,
     processedMessages,
     setNewMessagesNotification,
+    // processedMessages were incorrectly rebuilt with a new object identity at some point, hence the .length usage
     processedMessages.length,
     hasMoreNewer,
     jumpToLatestMessage,
@@ -375,8 +377,9 @@ const VirtualizedMessageListWithContext = <
     return Item;
   }, [
     customClasses?.virtualMessage,
-    Object.keys(messageGroupStyles),
+    messageGroupStyles,
     numItemsPrepended,
+    // processedMessages were incorrectly rebuilt with a new object identity at some point, hence the .length usage
     processedMessages.length,
   ]);
 

src/components/MessageList/hooks/useEnrichedMessages.ts

@@ -65,7 +65,7 @@ export const useEnrichedMessages = <
   const groupStylesFn = groupStyles || getGroupStyles;
   const messageGroupStyles = useMemo(
     () =>
-      messagesWithDates.reduce((acc, message, i) => {
+      messagesWithDates.reduce<Record<string, GroupStyle>>((acc, message, i) => {
         const style = groupStylesFn(
           message,
           messagesWithDates[i - 1],
@@ -74,7 +74,7 @@ export const useEnrichedMessages = <
         );
         if (style) acc[message.id] = style;
         return acc;
-      }, {} as Record<string, GroupStyle>),
+      }, {}),
     [messagesWithDates, noGroupByUser],
   );
 

src/components/Reactions/hooks/useProcessReactions.tsx

@@ -55,21 +55,21 @@ export const useProcessReactions = <
 
   const latestReactionTypes = useMemo(
     () =>
-      latestReactions.reduce((reactionTypes, { type }) => {
+      latestReactions.reduce<string[]>((reactionTypes, { type }) => {
         if (reactionTypes.indexOf(type) === -1) {
           reactionTypes.push(type);
         }
         return reactionTypes;
-      }, [] as string[]),
+      }, []),
     [latestReactions],
   );
 
   const supportedReactionMap = useMemo(
     () =>
-      reactionOptions.reduce((acc, { id }) => {
+      reactionOptions.reduce<Record<string, boolean>>((acc, { id }) => {
         acc[id] = true;
         return acc;
-      }, {} as Record<string, boolean>),
+      }, {}),
     [reactionOptions],
   );