Merge pull request Expensify#84067 from Expensify/rodrigo-perf-MoneyRequestReportPreview-2

perf: Stabilize TransactionPreview

Author: rlinoz

src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx

@@ -126,6 +126,8 @@ function MoneyRequestReportPreview({
     // We only want to highlight the new expenses if the screen is focused.
     const newTransactionIDs = isFocused ? new Set(newTransactions.map((transaction) => transaction.transactionID)) : undefined;
 
+    const transactionPreviewContainerStyles = [styles.h100, reportPreviewStyles.transactionPreviewCarouselStyle];
+
     const renderItem: ListRenderItem<Transaction> = ({item}) => (
         <TransactionPreview
             chatReportID={chatReportID}
@@ -138,14 +140,14 @@ function MoneyRequestReportPreview({
             isWhisper={isWhisper}
             isHovered={isHovered}
             iouReportID={iouReportID}
-            containerStyles={[styles.h100, reportPreviewStyles.transactionPreviewCarouselStyle]}
+            containerStyles={transactionPreviewContainerStyles}
             shouldDisplayContextMenu={shouldDisplayContextMenu}
             transactionPreviewWidth={reportPreviewStyles.transactionPreviewCarouselStyle.width}
             transactionID={item.transactionID}
             reportPreviewAction={action}
             onPreviewPressed={openReportFromPreview}
             shouldShowPayerAndReceiver={shouldShowPayerAndReceiver}
-            shouldHighlight={newTransactionIDs?.has(item.transactionID)}
+            shouldHighlight={!!newTransactionIDs?.has(item.transactionID)}
         />
     );
 

src/components/ReportActionItem/TransactionPreview/index.tsx

@@ -1,5 +1,5 @@
 import {useRoute} from '@react-navigation/native';
-import React, {useCallback, useMemo} from 'react';
+import React, {memo, useCallback, useMemo} from 'react';
 import type {GestureResponderEvent} from 'react-native';
 import {usePersonalDetails, useSession} from '@components/OnyxListItemProvider';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
@@ -68,7 +68,7 @@ function TransactionPreview(props: TransactionPreviewProps) {
     const sessionAccountID = session?.accountID;
     const areThereDuplicates = allDuplicateIDs.length > 0 && duplicates.length > 0 && allDuplicateIDs.length === duplicates.length;
 
-    const transactionDetails = useMemo(() => getTransactionDetails(transaction), [transaction]);
+    const transactionDetails = getTransactionDetails(transaction);
     const {amount: requestAmount, currency: requestCurrency} = transactionDetails ?? {};
 
     const showContextMenu = (event: GestureResponderEvent) => {
@@ -83,11 +83,10 @@ function TransactionPreview(props: TransactionPreviewProps) {
         clearIOUError(chatReportID);
     }, [chatReportID]);
 
-    const navigateToReviewFields = useCallback(() => {
+    const navigateToReviewFields = () =>
         Navigation.navigate(
             getReviewNavigationRoute(Navigation.getActiveRoute(), route.params?.threadReportID, transaction, duplicates, policy, policyCategories, policyTags ?? {}, transactionReport),
         );
-    }, [route.params?.threadReportID, transaction, duplicates, policy, policyCategories, policyTags, transactionReport]);
 
     const transactionPreview = transaction;
 
@@ -163,4 +162,4 @@ function TransactionPreview(props: TransactionPreviewProps) {
     );
 }
 
-export default TransactionPreview;
+export default memo(TransactionPreview);