From 32f1e5d08d8e6d22866b5f35a112a91a0b1575a4 Mon Sep 17 00:00:00 2001 From: Rodrigo Lino da Costa Date: Tue, 3 Mar 2026 16:25:50 -0300 Subject: [PATCH 1/8] stable should highlight --- .../ReportActionItem/MoneyRequestReportPreview/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx index 09f1961779d1..3598443e2366 100644 --- a/src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx +++ b/src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx @@ -146,6 +146,7 @@ function MoneyRequestReportPreview({ onPreviewPressed={openReportFromPreview} shouldShowPayerAndReceiver={shouldShowPayerAndReceiver} shouldHighlight={newTransactionIDs?.has(item.transactionID)} + shouldHighlight={!!newTransactionIDs?.has(item.transactionID)} /> ); From 862ac6c3ba73b77abf890bad62c6853a631de1dd Mon Sep 17 00:00:00 2001 From: Rodrigo Lino da Costa Date: Tue, 3 Mar 2026 16:38:17 -0300 Subject: [PATCH 2/8] avoid transactionpreview re-renders --- .../MoneyRequestReportPreview/index.tsx | 16 +++++++++++++--- .../TransactionPreview/index.tsx | 4 ++-- 2 files changed, 15 insertions(+), 5 deletions(-) diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx index 3598443e2366..aa5393c1b9ad 100644 --- a/src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx +++ b/src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx @@ -125,11 +125,22 @@ function MoneyRequestReportPreview({ const isFocused = useIsFocused(); // 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 transactionActionsByID = useMemo(() => { + const actionsByID = new Map>(); + transactions.forEach((transaction) => { + actionsByID.set(transaction.transactionID, getIOUActionForReportID(transaction.reportID, transaction.transactionID)); + }); + return actionsByID; + }, [transactions, hasOnceLoadedReportActions]); + const transactionPreviewContainerStyles = useMemo( + () => [styles.h100, reportPreviewStyles.transactionPreviewCarouselStyle], + [styles.h100, reportPreviewStyles.transactionPreviewCarouselStyle], + ); const renderItem: ListRenderItem = ({item}) => ( ); diff --git a/src/components/ReportActionItem/TransactionPreview/index.tsx b/src/components/ReportActionItem/TransactionPreview/index.tsx index 2df580588dbf..d76bc2acaae6 100644 --- a/src/components/ReportActionItem/TransactionPreview/index.tsx +++ b/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'; @@ -163,4 +163,4 @@ function TransactionPreview(props: TransactionPreviewProps) { ); } -export default TransactionPreview; +export default memo(TransactionPreview); From 5d0493a8e14f646653726d49d210f36d8daaa8aa Mon Sep 17 00:00:00 2001 From: Rodrigo Lino da Costa Date: Tue, 3 Mar 2026 17:30:25 -0300 Subject: [PATCH 3/8] stop creating actions map --- .../MoneyRequestReportPreview/index.tsx | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx index aa5393c1b9ad..954ba531b219 100644 --- a/src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx +++ b/src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx @@ -125,13 +125,7 @@ function MoneyRequestReportPreview({ const isFocused = useIsFocused(); // 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 transactionActionsByID = useMemo(() => { - const actionsByID = new Map>(); - transactions.forEach((transaction) => { - actionsByID.set(transaction.transactionID, getIOUActionForReportID(transaction.reportID, transaction.transactionID)); - }); - return actionsByID; - }, [transactions, hasOnceLoadedReportActions]); + const transactionPreviewContainerStyles = useMemo( () => [styles.h100, reportPreviewStyles.transactionPreviewCarouselStyle], [styles.h100, reportPreviewStyles.transactionPreviewCarouselStyle], @@ -140,7 +134,7 @@ function MoneyRequestReportPreview({ const renderItem: ListRenderItem = ({item}) => ( Date: Wed, 4 Mar 2026 09:25:25 -0300 Subject: [PATCH 4/8] make TransactionPreview react compiler compatible --- .../ReportActionItem/TransactionPreview/index.tsx | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/src/components/ReportActionItem/TransactionPreview/index.tsx b/src/components/ReportActionItem/TransactionPreview/index.tsx index d76bc2acaae6..c42a669b6979 100644 --- a/src/components/ReportActionItem/TransactionPreview/index.tsx +++ b/src/components/ReportActionItem/TransactionPreview/index.tsx @@ -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,9 @@ function TransactionPreview(props: TransactionPreviewProps) { clearIOUError(chatReportID); }, [chatReportID]); - const navigateToReviewFields = useCallback(() => { - Navigation.navigate( + 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 +161,4 @@ function TransactionPreview(props: TransactionPreviewProps) { ); } -export default memo(TransactionPreview); +export default TransactionPreview; From 94bb38bfda9e454c2c1d62d7ea42f6852ce0dfe8 Mon Sep 17 00:00:00 2001 From: Rodrigo Lino da Costa Date: Wed, 4 Mar 2026 09:25:41 -0300 Subject: [PATCH 5/8] make TransactionPreview react compiler compatible --- src/components/ReportActionItem/TransactionPreview/index.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/ReportActionItem/TransactionPreview/index.tsx b/src/components/ReportActionItem/TransactionPreview/index.tsx index c42a669b6979..eb13d5d9de2c 100644 --- a/src/components/ReportActionItem/TransactionPreview/index.tsx +++ b/src/components/ReportActionItem/TransactionPreview/index.tsx @@ -83,7 +83,8 @@ function TransactionPreview(props: TransactionPreviewProps) { clearIOUError(chatReportID); }, [chatReportID]); - const navigateToReviewFields = () => Navigation.navigate( + const navigateToReviewFields = () => + Navigation.navigate( getReviewNavigationRoute(Navigation.getActiveRoute(), route.params?.threadReportID, transaction, duplicates, policy, policyCategories, policyTags ?? {}, transactionReport), ); From bfb3b6c82d81ebf050d72c36623fcf2fbd5d16ac Mon Sep 17 00:00:00 2001 From: Rodrigo Lino da Costa Date: Wed, 4 Mar 2026 11:17:03 -0300 Subject: [PATCH 6/8] remove unused import --- src/components/ReportActionItem/TransactionPreview/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ReportActionItem/TransactionPreview/index.tsx b/src/components/ReportActionItem/TransactionPreview/index.tsx index eb13d5d9de2c..aa06660bebad 100644 --- a/src/components/ReportActionItem/TransactionPreview/index.tsx +++ b/src/components/ReportActionItem/TransactionPreview/index.tsx @@ -1,5 +1,5 @@ import {useRoute} from '@react-navigation/native'; -import React, {memo, useCallback, useMemo} from 'react'; +import React, {useCallback, useMemo} from 'react'; import type {GestureResponderEvent} from 'react-native'; import {usePersonalDetails, useSession} from '@components/OnyxListItemProvider'; import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback'; From 23e3531e11528a2a2fdef977e05fe1f34657ff71 Mon Sep 17 00:00:00 2001 From: Rodrigo Lino da Costa Date: Thu, 5 Mar 2026 11:23:26 -0300 Subject: [PATCH 7/8] leveraging react compiler for styles too --- .../ReportActionItem/MoneyRequestReportPreview/index.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx index 954ba531b219..b9db9a93c843 100644 --- a/src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx +++ b/src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx @@ -126,10 +126,7 @@ 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 = useMemo( - () => [styles.h100, reportPreviewStyles.transactionPreviewCarouselStyle], - [styles.h100, reportPreviewStyles.transactionPreviewCarouselStyle], - ); + const transactionPreviewContainerStyles = [styles.h100, reportPreviewStyles.transactionPreviewCarouselStyle]; const renderItem: ListRenderItem = ({item}) => ( Date: Thu, 5 Mar 2026 17:21:55 -0300 Subject: [PATCH 8/8] rollback removin memo --- src/components/ReportActionItem/TransactionPreview/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/ReportActionItem/TransactionPreview/index.tsx b/src/components/ReportActionItem/TransactionPreview/index.tsx index a1ff492a9ae7..1f0371340c03 100644 --- a/src/components/ReportActionItem/TransactionPreview/index.tsx +++ b/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'; @@ -161,4 +161,4 @@ function TransactionPreview(props: TransactionPreviewProps) { ); } -export default TransactionPreview; +export default memo(TransactionPreview);