fix: performance improvement for message list render item (#3306)

Author: khushal87

package/src/components/Channel/Channel.tsx

@@ -106,7 +106,11 @@ import {
   isImagePickerAvailable,
   NativeHandlers,
 } from '../../native';
-import { ChannelUnreadState, FileTypes } from '../../types/types';
+import {
+  ChannelUnreadStateStore,
+  ChannelUnreadStateStoreType,
+} from '../../state-store/channel-unread-state';
+import { FileTypes } from '../../types/types';
 import { addReactionToLocalState } from '../../utils/addReactionToLocalState';
 import { compressedImageURI } from '../../utils/compressImage';
 import { patchMessageTextCommand } from '../../utils/patchMessageTextCommand';
@@ -326,6 +330,7 @@ export type ChannelPropsWithContext = Pick<ChannelContextValue, 'channel'> &
       | 'forceAlignMessages'
       | 'Gallery'
       | 'getMessagesGroupStyles'
+      | 'getMessageGroupStyle'
       | 'Giphy'
       | 'giphyVersion'
       | 'handleBan'
@@ -426,7 +431,7 @@ export type ChannelPropsWithContext = Pick<ChannelContextValue, 'channel'> &
      */
     doMarkReadRequest?: (
       channel: ChannelType,
-      setChannelUnreadUiState?: (state: ChannelUnreadState) => void,
+      setChannelUnreadUiState?: (data: ChannelUnreadStateStoreType['channelUnreadState']) => void,
     ) => void;
     /**
      * Overrides the Stream default send message request (Advanced usage only)
@@ -622,6 +627,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     forceAlignMessages,
     Gallery = GalleryDefault,
     getMessagesGroupStyles,
+    getMessageGroupStyle,
     Giphy = GiphyDefault,
     giphyVersion = 'fixed_height',
     handleAttachButtonPress,
@@ -778,10 +784,13 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
   const [thread, setThread] = useState<LocalMessage | null>(threadProps || null);
   const [threadHasMore, setThreadHasMore] = useState(true);
   const [threadLoadingMore, setThreadLoadingMore] = useState(false);
-  const [channelUnreadState, setChannelUnreadState] = useState<ChannelUnreadState | undefined>(
-    undefined,
+  const [channelUnreadStateStore] = useState(new ChannelUnreadStateStore());
+  const setChannelUnreadState = useCallback(
+    (data: ChannelUnreadStateStoreType['channelUnreadState']) => {
+      channelUnreadStateStore.channelUnreadState = data;
+    },
+    [channelUnreadStateStore],
   );
-
   const { bottomSheetRef, closePicker, openPicker } = useAttachmentPickerBottomSheet();
 
   const syncingChannelRef = useRef(false);
@@ -906,16 +915,14 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
       }
 
       if (event.type === 'notification.mark_unread') {
-        setChannelUnreadState((prev) => {
-          if (!(event.last_read_at && event.user)) {
-            return prev;
-          }
-          return {
-            first_unread_message_id: event.first_unread_message_id,
-            last_read: new Date(event.last_read_at),
-            last_read_message_id: event.last_read_message_id,
-            unread_messages: event.unread_messages ?? 0,
-          };
+        if (!(event.last_read_at && event.user)) {
+          return;
+        }
+        setChannelUnreadState({
+          first_unread_message_id: event.first_unread_message_id,
+          last_read: new Date(event.last_read_at),
+          last_read_message_id: event.last_read_message_id,
+          unread_messages: event.unread_messages ?? 0,
         });
       }
 
@@ -1773,7 +1780,8 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
 
   const channelContext = useCreateChannelContext({
     channel,
-    channelUnreadState,
+    channelUnreadState: channelUnreadStateStore.channelUnreadState,
+    channelUnreadStateStore,
     disabled: !!channel?.data?.frozen,
     EmptyStateIndicator,
     enableMessageGroupingByUser,
@@ -1921,6 +1929,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     FlatList,
     forceAlignMessages,
     Gallery,
+    getMessageGroupStyle,
     getMessagesGroupStyles,
     Giphy,
     giphyVersion,

package/src/components/Channel/hooks/useCreateChannelContext.ts

@@ -5,6 +5,7 @@ import type { ChannelContextValue } from '../../../contexts/channelContext/Chann
 export const useCreateChannelContext = ({
   channel,
   channelUnreadState,
+  channelUnreadStateStore,
   disabled,
   EmptyStateIndicator,
   enableMessageGroupingByUser,
@@ -46,12 +47,12 @@ export const useCreateChannelContext = ({
   const readUsersLastReads = readUsers
     .map(({ last_read }) => last_read?.toISOString() ?? '')
     .join();
-  const stringifiedChannelUnreadState = JSON.stringify(channelUnreadState);
 
   const channelContext: ChannelContextValue = useMemo(
     () => ({
       channel,
       channelUnreadState,
+      channelUnreadStateStore,
       disabled,
       EmptyStateIndicator,
       enableMessageGroupingByUser,
@@ -96,7 +97,6 @@ export const useCreateChannelContext = ({
       membersLength,
       readUsersLength,
       readUsersLastReads,
-      stringifiedChannelUnreadState,
       targetedMessage,
       threadList,
       watcherCount,

package/src/components/Channel/hooks/useCreateMessagesContext.ts

@@ -27,6 +27,7 @@ export const useCreateMessagesContext = ({
   FlatList,
   forceAlignMessages,
   Gallery,
+  getMessageGroupStyle,
   getMessagesGroupStyles,
   Giphy,
   giphyVersion,
@@ -146,6 +147,7 @@ export const useCreateMessagesContext = ({
       FlatList,
       forceAlignMessages,
       Gallery,
+      getMessageGroupStyle,
       getMessagesGroupStyles,
       Giphy,
       giphyVersion,

package/src/components/Message/Message.tsx

@@ -253,7 +253,6 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
     handleRetry,
     handleThreadReply,
     isTargetedMessage,
-    lastReceivedId,
     members,
     message,
     messageActions: messageActionsProp = defaultMessageActions,
@@ -652,7 +651,6 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
     isMessageAIGenerated,
     isMyMessage,
     lastGroupMessage: groupStyles?.[0] === 'single' || groupStyles?.[0] === 'bottom',
-    lastReceivedId,
     members,
     message,
     messageContentOrder,
@@ -789,7 +787,6 @@ const areEqual = (prevProps: MessagePropsWithContext, nextProps: MessagePropsWit
     groupStyles: prevGroupStyles,
     isAttachmentEqual,
     isTargetedMessage: prevIsTargetedMessage,
-    lastReceivedId: prevLastReceivedId,
     members: prevMembers,
     message: prevMessage,
     messagesContext: prevMessagesContext,
@@ -803,7 +800,6 @@ const areEqual = (prevProps: MessagePropsWithContext, nextProps: MessagePropsWit
     goToMessage: nextGoToMessage,
     groupStyles: nextGroupStyles,
     isTargetedMessage: nextIsTargetedMessage,
-    lastReceivedId: nextLastReceivedId,
     members: nextMembers,
     message: nextMessage,
     messagesContext: nextMessagesContext,
@@ -832,17 +828,6 @@ const areEqual = (prevProps: MessagePropsWithContext, nextProps: MessagePropsWit
     return false;
   }
 
-  const lastReceivedIdChangedAndMatters =
-    prevLastReceivedId !== nextLastReceivedId &&
-    (prevLastReceivedId === prevMessage.id ||
-      prevLastReceivedId === nextMessage.id ||
-      nextLastReceivedId === prevMessage.id ||
-      nextLastReceivedId === nextMessage.id);
-
-  if (lastReceivedIdChangedAndMatters) {
-    return false;
-  }
-
   const goToMessageChangedAndMatters =
     nextMessage.quoted_message_id && prevGoToMessage !== nextGoToMessage;
 

package/src/components/Message/MessageSimple/MessageContent.tsx

@@ -535,7 +535,6 @@ export const MessageContent = (props: MessageContentProps) => {
     isEditedMessageOpen,
     isMessageAIGenerated,
     isMyMessage,
-    lastReceivedId,
     message,
     messageContentOrder,
     onLongPress,
@@ -575,7 +574,6 @@ export const MessageContent = (props: MessageContentProps) => {
         isEditedMessageOpen,
         isMessageAIGenerated,
         isMyMessage,
-        lastReceivedId,
         message,
         messageContentOrder,
         MessageError,

package/src/components/Message/MessageSimple/MessageWrapper.tsx

@@ -0,0 +1,147 @@
+import React, { useCallback } from 'react';
+
+import { View } from 'react-native';
+
+import { LocalMessage } from 'stream-chat';
+
+import { useMessageDateSeparator } from '../../../components/MessageList/hooks/useMessageDateSeparator';
+import { useMessageGroupStyles } from '../../../components/MessageList/hooks/useMessageGroupStyles';
+import { useChannelContext } from '../../../contexts/channelContext/ChannelContext';
+import { useChatContext } from '../../../contexts/chatContext/ChatContext';
+import { useMessageListItemContext } from '../../../contexts/messageListItemContext/MessageListItemContext';
+import { useMessagesContext } from '../../../contexts/messagesContext/MessagesContext';
+import { ThemeProvider, useTheme } from '../../../contexts/themeContext/ThemeContext';
+
+import { useStateStore } from '../../../hooks/useStateStore';
+import { ChannelUnreadStateStoreType } from '../../../state-store/channel-unread-state';
+import { MessagePreviousAndNextMessageStoreType } from '../../../state-store/message-list-prev-next-state';
+
+const channelUnreadStateSelector = (state: ChannelUnreadStateStoreType) => ({
+  first_unread_message_id: state.channelUnreadState?.first_unread_message_id,
+  last_read_message_id: state.channelUnreadState?.last_read_message_id,
+  last_read_timestamp: state.channelUnreadState?.last_read?.getTime(),
+  unread_messages: state.channelUnreadState?.unread_messages,
+});
+
+export type MessageWrapperProps = {
+  message: LocalMessage;
+};
+
+export const MessageWrapper = React.memo((props: MessageWrapperProps) => {
+  const { message } = props;
+  const { client } = useChatContext();
+  const {
+    channelUnreadStateStore,
+    channel,
+    hideDateSeparators,
+    highlightedMessageId,
+    maxTimeBetweenGroupedMessages,
+    threadList,
+  } = useChannelContext();
+  const {
+    getMessageGroupStyle,
+    InlineDateSeparator,
+    InlineUnreadIndicator,
+    Message,
+    MessageSystem,
+    myMessageTheme,
+    shouldShowUnreadUnderlay,
+  } = useMessagesContext();
+  const {
+    goToMessage,
+    onThreadSelect,
+    noGroupByUser,
+    modifiedTheme,
+    messageListPreviousAndNextMessageStore,
+  } = useMessageListItemContext();
+
+  const dateSeparatorDate = useMessageDateSeparator({
+    hideDateSeparators,
+    message,
+    messageListPreviousAndNextMessageStore,
+  });
+
+  const selector = useCallback(
+    (state: MessagePreviousAndNextMessageStoreType) => ({
+      nextMessage: state.messageList[message.id]?.nextMessage,
+    }),
+    [message.id],
+  );
+  const { nextMessage } = useStateStore(messageListPreviousAndNextMessageStore.state, selector);
+  const isNewestMessage = nextMessage === undefined;
+  const groupStyles = useMessageGroupStyles({
+    dateSeparatorDate,
+    getMessageGroupStyle,
+    maxTimeBetweenGroupedMessages,
+    message,
+    messageListPreviousAndNextMessageStore,
+    noGroupByUser,
+  });
+
+  const { first_unread_message_id, last_read_timestamp, last_read_message_id, unread_messages } =
+    useStateStore(channelUnreadStateStore.state, channelUnreadStateSelector);
+  const {
+    theme: {
+      messageList: { messageContainer },
+      screenPadding,
+    },
+  } = useTheme();
+  if (!channel || channel.disconnected) {
+    return null;
+  }
+
+  const createdAtTimestamp = message.created_at && new Date(message.created_at).getTime();
+  const isLastReadMessage =
+    last_read_message_id === message.id ||
+    (!unread_messages && createdAtTimestamp === last_read_timestamp);
+
+  const showUnreadSeparator =
+    isLastReadMessage &&
+    !isNewestMessage &&
+    // The `channelUnreadState?.first_unread_message_id` is here for sent messages unread label
+    (!!first_unread_message_id || !!unread_messages);
+
+  const showUnreadUnderlay = !!shouldShowUnreadUnderlay && showUnreadSeparator;
+
+  const wrapMessageInTheme = client.userID === message.user?.id && !!myMessageTheme;
+  const renderDateSeperator = dateSeparatorDate ? (
+    <InlineDateSeparator date={dateSeparatorDate} />
+  ) : null;
+
+  const renderMessage = (
+    <Message
+      goToMessage={goToMessage}
+      groupStyles={groupStyles}
+      isTargetedMessage={highlightedMessageId === message.id}
+      message={message}
+      onThreadSelect={onThreadSelect}
+      showUnreadUnderlay={showUnreadUnderlay}
+      style={[messageContainer]}
+      threadList={threadList}
+    />
+  );
+
+  return (
+    <View testID={`message-list-item-${message.id}`}>
+      {message.type === 'system' ? (
+        <MessageSystem
+          message={message}
+          style={[{ paddingHorizontal: screenPadding }, messageContainer]}
+        />
+      ) : wrapMessageInTheme ? (
+        <ThemeProvider mergedStyle={modifiedTheme}>
+          <View testID={`message-list-item-${message.id}`}>
+            {renderDateSeperator}
+            {renderMessage}
+          </View>
+        </ThemeProvider>
+      ) : (
+        <View testID={`message-list-item-${message.id}`}>
+          {renderDateSeperator}
+          {renderMessage}
+        </View>
+      )}
+      {showUnreadUnderlay && <InlineUnreadIndicator />}
+    </View>
+  );
+});

package/src/components/Message/MessageSimple/__tests__/MessageStatus.test.js

@@ -81,11 +81,7 @@ describe('MessageStatus', () => {
       <ChannelsStateProvider>
         <Chat client={chatClient} i18nInstance={i18nInstance}>
           <Channel channel={channel}>
-            <MessageStatus
-              lastReceivedId={staticMessage.id}
-              message={staticMessage}
-              readBy={readBy}
-            />
+            <MessageStatus message={staticMessage} readBy={readBy} />
           </Channel>
         </Chat>
       </ChannelsStateProvider>,

package/src/components/Message/hooks/useCreateMessageContext.ts

@@ -22,7 +22,6 @@ export const useCreateMessageContext = ({
   isMessageAIGenerated,
   isMyMessage,
   lastGroupMessage,
-  lastReceivedId,
   members,
   message,
   messageContentOrder,
@@ -74,7 +73,6 @@ export const useCreateMessageContext = ({
       isMessageAIGenerated,
       isMyMessage,
       lastGroupMessage,
-      lastReceivedId,
       members,
       message,
       messageContentOrder,
@@ -105,7 +103,6 @@ export const useCreateMessageContext = ({
       hasReactions,
       isEditedMessageOpen,
       lastGroupMessage,
-      lastReceivedId,
       membersValue,
       myMessageThemeString,
       reactionsValue,