Merge pull request Expensify#65570 from callstack-internal/perf/optimize-chat-bubble-cell-rendering

Render ChatBubbleCell only if it's needed

Author: mountiny

src/components/TransactionItemRow/index.tsx

@@ -388,6 +388,10 @@ function TransactionItemRow({
         ],
     );
     const safeColumnWrapperStyle = columnWrapperStyles ?? [styles.p3, styles.expenseWidgetRadius];
+    const shouldRenderChatBubbleCell = useMemo(() => {
+        return columns?.includes(CONST.REPORT.TRANSACTION_LIST.COLUMNS.COMMENTS) ?? false;
+    }, [columns]);
+
     return (
         <View
             style={[styles.flex1]}
@@ -479,11 +483,13 @@ function TransactionItemRow({
                                         missingFieldError={missingFieldError}
                                     />
                                 </View>
-                                <ChatBubbleCell
-                                    transaction={transactionItem}
-                                    containerStyles={[styles.mt2]}
-                                    isInSingleTransactionReport={isInSingleTransactionReport}
-                                />
+                                {shouldRenderChatBubbleCell && (
+                                    <ChatBubbleCell
+                                        transaction={transactionItem}
+                                        containerStyles={[styles.mt2]}
+                                        isInSingleTransactionReport={isInSingleTransactionReport}
+                                    />
+                                )}
                             </View>
                         </View>
                     </Animated.View>