fix: move renderItem in the MessageList outside of the main component

Author: khushal87

package/src/components/MessageList/MessageItem.tsx

@@ -36,106 +36,108 @@ const shouldShowUnreadSeparator = <
   return showUnreadSeparator;
 };
 
-export const MessageItem = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->({
-  index,
-  message,
-  goToMessage,
-  highlightedMessageId,
-  lastReceivedMessageId,
-  onThreadSelect,
-  shouldApplyAndroidWorkaround,
-}: {
-  index: number;
-  message: MessageType<StreamChatGenerics>;
-  goToMessage: (messageId: string) => Promise<void>;
-  highlightedMessageId?: string;
-  lastReceivedMessageId?: string;
-  onThreadSelect?: (message: MessageType<DefaultStreamChatGenerics>) => void;
-  shouldApplyAndroidWorkaround: boolean;
-}) => {
-  const { client } = useChatContext();
-  const clientUserId = client.user?.id;
-  const { theme } = useTheme();
-  const {
-    messageList: { messageContainer },
-    screenPadding,
-  } = theme;
-
-  const { channelUnreadState, threadList } = useChannelContext();
-  const {
-    Message,
-    MessageSystem,
-    myMessageTheme,
-    InlineDateSeparator,
-    InlineUnreadIndicator,
-    shouldShowUnreadUnderlay,
-  } = useMessagesContext();
-
-  const myMessageThemeString = useMemo(() => JSON.stringify(myMessageTheme), [myMessageTheme]);
-
-  const modifiedTheme = useMemo(
-    () => mergeThemes({ style: myMessageTheme, theme }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [myMessageThemeString, theme],
-  );
-
-  const showUnreadUnderlay =
-    !!shouldShowUnreadUnderlay && shouldShowUnreadSeparator(message, index, channelUnreadState);
-
-  const wrapMessageInTheme = clientUserId === message.user?.id && !!myMessageTheme;
-  const renderDateSeperator = isMessageWithStylesReadByAndDateSeparator(message) &&
-    message.dateSeparator && <InlineDateSeparator date={message.dateSeparator} />;
-
-  const renderMessage = (
-    <Message
-      goToMessage={goToMessage}
-      groupStyles={isMessageWithStylesReadByAndDateSeparator(message) ? message.groupStyles : []}
-      isTargetedMessage={highlightedMessageId === message.id}
-      lastReceivedId={
-        lastReceivedMessageId === message.id || message.quoted_message_id
-          ? lastReceivedMessageId
-          : undefined
-      }
-      message={message}
-      onThreadSelect={onThreadSelect}
-      showUnreadUnderlay={showUnreadUnderlay}
-      style={[messageContainer]}
-      threadList={threadList}
-    />
-  );
-
-  return (
-    <View
-      style={[shouldApplyAndroidWorkaround ? styles.invertAndroid : undefined]}
-      testID={`message-list-item-${index}`}
-    >
-      {message.type === 'system' ? (
-        <MessageSystem
-          message={message}
-          style={[{ paddingHorizontal: screenPadding }, messageContainer]}
-        />
-      ) : wrapMessageInTheme ? (
-        <ThemeProvider mergedStyle={modifiedTheme}>
+export const MessageItem = React.memo(
+  <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({
+    index,
+    message,
+    goToMessage,
+    highlightedMessageId,
+    lastReceivedMessageId,
+    onThreadSelect,
+    shouldApplyAndroidWorkaround,
+  }: {
+    index: number;
+    message: MessageType<StreamChatGenerics>;
+    goToMessage: (messageId: string) => Promise<void>;
+    highlightedMessageId?: string;
+    lastReceivedMessageId?: string;
+    onThreadSelect?: (message: MessageType<DefaultStreamChatGenerics>) => void;
+    shouldApplyAndroidWorkaround: boolean;
+  }) => {
+    const { client } = useChatContext();
+    const clientUserId = client.user?.id;
+    const { theme } = useTheme();
+    const {
+      messageList: { messageContainer },
+      screenPadding,
+    } = theme;
+
+    const { channelUnreadState, threadList } = useChannelContext();
+    const {
+      Message,
+      MessageSystem,
+      myMessageTheme,
+      InlineDateSeparator,
+      InlineUnreadIndicator,
+      shouldShowUnreadUnderlay,
+    } = useMessagesContext();
+
+    const myMessageThemeString = useMemo(() => JSON.stringify(myMessageTheme), [myMessageTheme]);
+
+    const modifiedTheme = useMemo(
+      () => mergeThemes({ style: myMessageTheme, theme }),
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [myMessageThemeString, theme],
+    );
+
+    const showUnreadUnderlay =
+      !!shouldShowUnreadUnderlay && shouldShowUnreadSeparator(message, index, channelUnreadState);
+
+    const wrapMessageInTheme = clientUserId === message.user?.id && !!myMessageTheme;
+    const renderDateSeperator = isMessageWithStylesReadByAndDateSeparator(message) &&
+      message.dateSeparator && <InlineDateSeparator date={message.dateSeparator} />;
+
+    const renderMessage = (
+      <Message
+        goToMessage={goToMessage}
+        groupStyles={isMessageWithStylesReadByAndDateSeparator(message) ? message.groupStyles : []}
+        isTargetedMessage={highlightedMessageId === message.id}
+        lastReceivedId={
+          lastReceivedMessageId === message.id || message.quoted_message_id
+            ? lastReceivedMessageId
+            : undefined
+        }
+        message={message}
+        onThreadSelect={onThreadSelect}
+        showUnreadUnderlay={showUnreadUnderlay}
+        style={[messageContainer]}
+        threadList={threadList}
+      />
+    );
+
+    return (
+      <View
+        style={[shouldApplyAndroidWorkaround ? styles.invertAndroid : undefined]}
+        testID={`message-list-item-${index}`}
+      >
+        {message.type === 'system' ? (
+          <MessageSystem
+            message={message}
+            style={[{ paddingHorizontal: screenPadding }, messageContainer]}
+          />
+        ) : wrapMessageInTheme ? (
+          <ThemeProvider mergedStyle={modifiedTheme}>
+            <View testID={`message-list-item-${index}`}>
+              {renderDateSeperator}
+              {renderMessage}
+            </View>
+          </ThemeProvider>
+        ) : (
           <View testID={`message-list-item-${index}`}>
             {renderDateSeperator}
             {renderMessage}
           </View>
-        </ThemeProvider>
-      ) : (
-        <View testID={`message-list-item-${index}`}>
-          {renderDateSeperator}
-          {renderMessage}
-        </View>
-      )}
-      {showUnreadUnderlay && <InlineUnreadIndicator />}
-    </View>
-  );
-};
+        )}
+        {showUnreadUnderlay && <InlineUnreadIndicator />}
+      </View>
+    );
+  },
+);
 
 const styles = StyleSheet.create({
   invertAndroid: {
     transform: [{ scaleX: -1 }, { scaleY: -1 }],
   },
 });
+
+MessageItem.displayName = 'MessageItem';