fix: change date separator and group styles to ref

Author: khushal87

package/src/components/MessageList/MessageList.tsx

@@ -318,7 +318,7 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
    * NOTE: rawMessageList changes only when messages array state changes
    * processedMessageList changes on any state change
    */
-  const { dateSeparators, messageGroupStyles, processedMessageList, rawMessageList } =
+  const { dateSeparatorsRef, messageGroupStylesRef, processedMessageList, rawMessageList } =
     useMessageList({
       noGroupByUser,
       threadList,
@@ -493,7 +493,7 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
   const onViewableItemsChanged = useRef(unstableOnViewableItemsChanged);
   onViewableItemsChanged.current = unstableOnViewableItemsChanged;
 
-  const stableOnViwableItemsChanged = useCallback(
+  const stableOnViewableItemsChanged = useCallback(
     ({ viewableItems }: { viewableItems: ViewToken[] | undefined }) => {
       onViewableItemsChanged.current({ viewableItems });
     },
@@ -753,13 +753,14 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
       const showUnreadUnderlay = !!shouldShowUnreadUnderlay && showUnreadSeparator;
 
       const wrapMessageInTheme = client.userID === message.user?.id && !!myMessageTheme;
-      const renderDateSeperator = dateSeparators[message.id] && (
-        <InlineDateSeparator date={dateSeparators[message.id]} />
+      const renderDateSeperator = dateSeparatorsRef.current[message.id] && (
+        <InlineDateSeparator date={dateSeparatorsRef.current[message.id]} />
       );
+
       const renderMessage = (
         <Message
           goToMessage={goToMessage}
-          groupStyles={messageGroupStyles[message.id] ?? []}
+          groupStyles={messageGroupStylesRef.current[message.id] ?? []}
           isTargetedMessage={highlightedMessageId === message.id}
           lastReceivedId={
             lastReceivedId === message.id || message.quoted_message_id ? lastReceivedId : undefined
@@ -810,12 +811,12 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
       channelUnreadState?.last_read_message_id,
       channelUnreadState?.unread_messages,
       client.userID,
-      dateSeparators,
+      dateSeparatorsRef,
       goToMessage,
       highlightedMessageId,
       lastReceivedId,
       messageContainer,
-      messageGroupStyles,
+      messageGroupStylesRef,
       modifiedTheme,
       myMessageTheme,
       onThreadSelect,
@@ -1249,7 +1250,7 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
           onScrollEndDrag={onScrollEndDrag}
           onScrollToIndexFailed={onScrollToIndexFailedRef.current}
           onTouchEnd={dismissImagePicker}
-          onViewableItemsChanged={stableOnViwableItemsChanged}
+          onViewableItemsChanged={stableOnViewableItemsChanged}
           ref={refCallback}
           renderItem={renderItem}
           scrollEnabled={overlay === 'none'}

package/src/components/MessageList/hooks/useMessageList.ts

@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useMemo, useRef } from 'react';
 
 import type { LocalMessage } from 'stream-chat';
 
@@ -11,7 +11,7 @@ import {
 import { usePaginatedMessageListContext } from '../../../contexts/paginatedMessageListContext/PaginatedMessageListContext';
 import { useThreadContext } from '../../../contexts/threadContext/ThreadContext';
 
-import { getDateSeparators } from '../utils/getDateSeparators';
+import { DateSeparators, getDateSeparators } from '../utils/getDateSeparators';
 import { getGroupStyles } from '../utils/getGroupStyles';
 
 export type UseMessageListParams = {
@@ -22,6 +22,10 @@ export type UseMessageListParams = {
 
 export type GroupType = string;
 
+export type MessageGroupStyles = {
+  [key: string]: string[];
+};
+
 export const shouldIncludeMessageInList = (
   message: LocalMessage,
   options: { deletedMessagesVisibilityType?: DeletedMessagesVisibilityType; userId?: string },
@@ -51,7 +55,6 @@ export const useMessageList = (params: UseMessageListParams) => {
     useMessagesContext();
   const { messages } = usePaginatedMessageListContext();
   const { threadMessages } = useThreadContext();
-
   const messageList = threadList ? threadMessages : messages;
 
   const dateSeparators = useMemo(
@@ -65,19 +68,22 @@ export const useMessageList = (params: UseMessageListParams) => {
     [deletedMessagesVisibilityType, hideDateSeparators, messageList, client.userID],
   );
 
+  const dateSeparatorsRef = useRef<DateSeparators>(dateSeparators);
+  dateSeparatorsRef.current = dateSeparators;
+
   const messageGroupStyles = useMemo(
     () =>
       getMessagesGroupStyles({
-        dateSeparators,
+        dateSeparators: dateSeparatorsRef.current,
         hideDateSeparators,
         maxTimeBetweenGroupedMessages,
         messages: messageList,
         noGroupByUser,
         userId: client.userID,
       }),
     [
+      dateSeparatorsRef,
       getMessagesGroupStyles,
-      dateSeparators,
       hideDateSeparators,
       maxTimeBetweenGroupedMessages,
       messageList,
@@ -86,6 +92,9 @@ export const useMessageList = (params: UseMessageListParams) => {
     ],
   );
 
+  const messageGroupStylesRef = useRef<MessageGroupStyles>(messageGroupStyles);
+  messageGroupStylesRef.current = messageGroupStyles;
+
   const processedMessageList = useMemo<LocalMessage[]>(() => {
     const newMessageList = [];
     for (const message of messageList) {
@@ -103,9 +112,9 @@ export const useMessageList = (params: UseMessageListParams) => {
 
   return {
     /** Date separators */
-    dateSeparators,
+    dateSeparatorsRef,
     /** Message group styles */
-    messageGroupStyles,
+    messageGroupStylesRef,
     /** Messages enriched with dates/readby/groups and also reversed in order */
     processedMessageList,
     /** Raw messages from the channel state */

package/src/components/MessageList/utils/getGroupStyles.ts

@@ -40,7 +40,7 @@ const getGroupStyle = (
     previousMessage.type === 'error' ||
     userId !== previousMessage?.user?.id ||
     !!isPrevMessageTypeDeleted ||
-    (!hideDateSeparators && dateSeparators[message.id]) ||
+    (!hideDateSeparators && dateSeparators[previousMessage.id]) ||
     isEditedMessage(previousMessage);
 
   const isBottomMessage =