fix: performance improvement for message list render item

Author: khushal87

package/src/components/Channel/Channel.tsx

@@ -102,8 +102,12 @@ import {
   isImagePickerAvailable,
   NativeHandlers,
 } from '../../native';
+import {
+  ChannelUnreadStateStore,
+  ChannelUnreadStateStoreType,
+} from '../../state-store/channel-unread-state';
 import * as dbApi from '../../store/apis';
-import { ChannelUnreadState, FileTypes } from '../../types/types';
+import { FileTypes } from '../../types/types';
 import { addReactionToLocalState } from '../../utils/addReactionToLocalState';
 import { compressedImageURI } from '../../utils/compressImage';
 import { patchMessageTextCommand } from '../../utils/patchMessageTextCommand';
@@ -421,7 +425,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)
@@ -735,10 +739,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 = useMemo(() => new ChannelUnreadStateStore(), []);
+  const setChannelUnreadState = useCallback(
+    (data: ChannelUnreadStateStoreType['channelUnreadState']) => {
+      channelUnreadStateStore.channelUnreadState = data;
+    },
+    [channelUnreadStateStore],
   );
-
   const { bottomSheetRef, closePicker, openPicker } = useAttachmentPickerBottomSheet();
 
   const syncingChannelRef = useRef(false);
@@ -863,16 +870,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,
         });
       }
 
@@ -1707,7 +1712,8 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
 
   const channelContext = useCreateChannelContext({
     channel,
-    channelUnreadState,
+    channelUnreadState: channelUnreadStateStore.channelUnreadState,
+    channelUnreadStateStore,
     disabled: !!channel?.data?.frozen,
     EmptyStateIndicator,
     enableMessageGroupingByUser,

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,
@@ -44,12 +45,12 @@ export const useCreateChannelContext = ({
   const readUsers = Object.values(read);
   const readUsersLength = readUsers.length;
   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,
@@ -94,7 +95,6 @@ export const useCreateChannelContext = ({
       membersLength,
       readUsersLength,
       readUsersLastReads,
-      stringifiedChannelUnreadState,
       targetedMessage,
       threadList,
       watcherCount,

package/src/components/Message/Message.tsx

@@ -252,7 +252,6 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
     handleRetry,
     handleThreadReply,
     isTargetedMessage,
-    lastReceivedId,
     members,
     message,
     messageActions: messageActionsProp = defaultMessageActions,
@@ -650,7 +649,6 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
     isMessageAIGenerated,
     isMyMessage,
     lastGroupMessage: groupStyles?.[0] === 'single' || groupStyles?.[0] === 'bottom',
-    lastReceivedId,
     members,
     message,
     messageContentOrder,
@@ -783,7 +781,6 @@ const areEqual = (prevProps: MessagePropsWithContext, nextProps: MessagePropsWit
     groupStyles: prevGroupStyles,
     isAttachmentEqual,
     isTargetedMessage: prevIsTargetedMessage,
-    lastReceivedId: prevLastReceivedId,
     members: prevMembers,
     message: prevMessage,
     messagesContext: prevMessagesContext,
@@ -797,7 +794,6 @@ const areEqual = (prevProps: MessagePropsWithContext, nextProps: MessagePropsWit
     goToMessage: nextGoToMessage,
     groupStyles: nextGroupStyles,
     isTargetedMessage: nextIsTargetedMessage,
-    lastReceivedId: nextLastReceivedId,
     members: nextMembers,
     message: nextMessage,
     messagesContext: nextMessagesContext,
@@ -826,17 +822,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,123 @@
+import React from 'react';
+
+import { View } from 'react-native';
+
+import { LocalMessage } from 'stream-chat';
+
+import { MessageListProps } from '../../../components/MessageList/MessageList';
+import { useChannelContext } from '../../../contexts/channelContext/ChannelContext';
+import { useChatContext } from '../../../contexts/chatContext/ChatContext';
+import { MessageContextValue } from '../../../contexts/messageContext/MessageContext';
+import { useMessagesContext } from '../../../contexts/messagesContext/MessagesContext';
+import { ThemeProvider, useTheme } from '../../../contexts/themeContext/ThemeContext';
+
+import { Theme } from '../../../contexts/themeContext/utils/theme';
+import { useStateStore } from '../../../hooks/useStateStore';
+import { ChannelUnreadStateStoreType } from '../../../state-store/channel-unread-state';
+
+const channelUnreadStateSelector = (state: ChannelUnreadStateStoreType) => ({
+  first_unread_message_id: state.channelUnreadState?.first_unread_message_id,
+  last_read: state.channelUnreadState?.last_read,
+  last_read_message_id: state.channelUnreadState?.last_read_message_id,
+  unread_messages: state.channelUnreadState?.unread_messages,
+});
+
+export type MessageWrapperProps = Pick<MessageContextValue, 'goToMessage'> &
+  Pick<MessageListProps, 'onThreadSelect'> & {
+    isNewestMessage?: boolean;
+    message: LocalMessage;
+    modifiedTheme?: Theme;
+    dateSeparatorDate?: Date;
+    messageGroupStyles?: string[];
+  };
+
+export const MessageWrapper = (props: MessageWrapperProps) => {
+  const {
+    dateSeparatorDate,
+    isNewestMessage,
+    message,
+    messageGroupStyles,
+    goToMessage,
+    onThreadSelect,
+    modifiedTheme,
+  } = props;
+  const { client } = useChatContext();
+  const { channelUnreadStateStore, channel, highlightedMessageId, threadList } =
+    useChannelContext();
+  const {
+    InlineDateSeparator,
+    InlineUnreadIndicator,
+    Message,
+    MessageSystem,
+    myMessageTheme,
+    shouldShowUnreadUnderlay,
+  } = useMessagesContext();
+
+  const { first_unread_message_id, last_read, 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 lastReadTimestamp = last_read?.getTime();
+  const isLastReadMessage =
+    last_read_message_id === message.id ||
+    (!unread_messages && createdAtTimestamp === lastReadTimestamp);
+
+  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={messageGroupStyles ?? []}
+      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,