diff --git a/src/components/MoneyReportHeader.tsx b/src/components/MoneyReportHeader.tsx index 7ee12f94958b..0bca126c77a6 100644 --- a/src/components/MoneyReportHeader.tsx +++ b/src/components/MoneyReportHeader.tsx @@ -188,14 +188,8 @@ function MoneyReportHeader({ {canBeMissing: true}, ); - const isExported = useMemo(() => isExportedUtils(reportActions), [reportActions]); - // wrapped in useMemo to improve performance because this is an operation on array - const integrationNameFromExportMessage = useMemo(() => { - if (!isExported) { - return null; - } - return getIntegrationNameFromExportMessageUtils(reportActions); - }, [isExported, reportActions]); + const isExported = isExportedUtils(reportActions); + const integrationNameFromExportMessage = isExported ? getIntegrationNameFromExportMessageUtils(reportActions) : null; const [reportPreviewAction] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${chatReport?.reportID}`, { canBeMissing: true, @@ -254,8 +248,7 @@ function MoneyReportHeader({ }, [reportPDFFilename, translate]); // Check if there is pending rter violation in all transactionViolations with given transactionIDs. - // wrapped in useMemo to avoid unnecessary re-renders and for better performance (array operation inside of function) - const hasAllPendingRTERViolations = useMemo(() => allHavePendingRTERViolation(transactions, violations), [transactions, violations]); + const hasAllPendingRTERViolations = allHavePendingRTERViolation(transactions, violations); // Check if user should see broken connection violation warning. const shouldShowBrokenConnectionViolation = shouldShowBrokenConnectionViolationForMultipleTransactions(transactionIDs, moneyRequestReport, policy, violations); const hasOnlyHeldExpenses = hasOnlyHeldExpensesReportUtils(moneyRequestReport?.reportID); diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx index 325b9b58281a..9355a83fcf30 100644 --- a/src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx +++ b/src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx @@ -126,8 +126,7 @@ function MoneyRequestReportActionsList({ const [isVisible, setIsVisible] = useState(Visibility.isVisible); const isFocused = useIsFocused(); const route = useRoute>(); - // wrapped in useMemo to avoid unnecessary re-renders and improve performance - const reportTransactionIDs = useMemo(() => transactions.map((transaction) => transaction.transactionID), [transactions]); + const reportTransactionIDs = transactions.map((transaction) => transaction.transactionID); const [chatReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${getNonEmptyStringOnyxID(report?.chatReportID)}`, {canBeMissing: true}); const reportID = report?.reportID; @@ -552,8 +551,7 @@ function MoneyRequestReportActionsList({ }, []); const isSelectAllChecked = selectedTransactionIDs.length > 0 && selectedTransactionIDs.length === transactionsWithoutPendingDelete.length; - // Wrapped into useCallback to stabilize children re-renders - const keyExtractor = useCallback((item: OnyxTypes.ReportAction) => item.reportActionID, []); + return ( item.reportActionID} onLayout={recordTimeToMeasureItemLayout} onEndReached={onEndReached} onEndReachedThreshold={0.75} diff --git a/src/pages/home/ReportScreen.tsx b/src/pages/home/ReportScreen.tsx index 350d55c7ca68..3b7800fdacbc 100644 --- a/src/pages/home/ReportScreen.tsx +++ b/src/pages/home/ReportScreen.tsx @@ -155,21 +155,7 @@ function ReportScreen({route, navigation}: ReportScreenProps) { const [userLeavingStatus = false] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_USER_IS_LEAVING_ROOM}${reportIDFromRoute}`, {canBeMissing: true}); const [reportOnyx] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportIDFromRoute}`, {allowStaleData: true, canBeMissing: true}); const [reportNameValuePairsOnyx] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_NAME_VALUE_PAIRS}${reportIDFromRoute}`, {allowStaleData: true, canBeMissing: true}); - - // We don't need report metadata's lastVisitTime. Removing it saves on re-renders count. - const [reportMetadata = defaultReportMetadata] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_METADATA}${reportIDFromRoute}`, { - canBeMissing: true, - allowStaleData: true, - selector: (metadata) => ({ - isOptimisticReport: metadata?.isOptimisticReport, - hasLoadingNewerReportActionsError: metadata?.hasLoadingNewerReportActionsError, - hasLoadingOlderReportActionsError: metadata?.hasLoadingOlderReportActionsError, - hasOnceLoadedReportActions: metadata?.hasOnceLoadedReportActions, - isLoadingInitialReportActions: metadata?.isLoadingInitialReportActions, - isLoadingNewerReportActions: metadata?.isLoadingNewerReportActions, - isLoadingOlderReportActions: metadata?.isLoadingOlderReportActions, - }), - }); + const [reportMetadata = defaultReportMetadata] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_METADATA}${reportIDFromRoute}`, {canBeMissing: true, allowStaleData: true}); const [policies = getEmptyObject>>()] = useOnyx(ONYXKEYS.COLLECTION.POLICY, {allowStaleData: true, canBeMissing: false}); const [parentReportAction] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${getNonEmptyStringOnyxID(reportOnyx?.parentReportID)}`, { canEvict: false, @@ -284,8 +270,7 @@ function ReportScreen({route, navigation}: ReportScreenProps) { const [currentUserEmail] = useOnyx(ONYXKEYS.SESSION, {selector: (value) => value?.email, canBeMissing: false}); const [isLoadingApp] = useOnyx(ONYXKEYS.IS_LOADING_APP, {canBeMissing: true}); const {reportActions: unfilteredReportActions, linkedAction, sortedAllReportActions, hasNewerActions, hasOlderActions} = usePaginatedReportActions(reportID, reportActionIDFromRoute); - // wrapping in useMemo because this is array operation and can cause performance issues - const reportActions = useMemo(() => getFilteredReportActionsForReportView(unfilteredReportActions), [unfilteredReportActions]); + const reportActions = getFilteredReportActionsForReportView(unfilteredReportActions); const [childReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${linkedAction?.childReportID}`, {canBeMissing: true}); const [isBannerVisible, setIsBannerVisible] = useState(true); @@ -315,19 +300,14 @@ function ReportScreen({route, navigation}: ReportScreenProps) { const {transactions: allReportTransactions} = useTransactionsAndViolationsForReport(reportIDFromRoute); const reportTransactions = useMemo(() => getAllNonDeletedTransactions(allReportTransactions, reportActions), [allReportTransactions, reportActions]); - // wrapping in useMemo because this is array operation and can cause performance issues - const visibleTransactions = useMemo( - () => reportTransactions?.filter((transaction) => isOffline || transaction.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE), - [reportTransactions, isOffline], - ); - const reportTransactionIDs = useMemo(() => visibleTransactions?.map((transaction) => transaction.transactionID), [visibleTransactions]); + const visibleTransactions = reportTransactions?.filter((transaction) => isOffline || transaction.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE); + const reportTransactionIDs = visibleTransactions?.map((transaction) => transaction.transactionID); const transactionThreadReportID = getOneTransactionThreadReportID(report, chatReport, reportActions ?? [], isOffline, reportTransactionIDs); const [transactionThreadReportActions = getEmptyObject()] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${transactionThreadReportID}`, { canBeMissing: true, }); const combinedReportActions = getCombinedReportActions(reportActions, transactionThreadReportID ?? null, Object.values(transactionThreadReportActions)); const lastReportAction = [...combinedReportActions, parentReportAction].find((action) => canEditReportAction(action) && !isMoneyRequestAction(action)); - // wrapping in useMemo to stabilize children re-rendering const policy = policies?.[`${ONYXKEYS.COLLECTION.POLICY}${report?.policyID}`]; const isTopMostReportId = currentReportIDValue?.currentReportID === reportIDFromRoute; const didSubscribeToReportLeavingEvents = useRef(false); @@ -776,12 +756,6 @@ function ReportScreen({route, navigation}: ReportScreenProps) { const onComposerFocus = useCallback(() => setIsComposerFocus(true), []); const onComposerBlur = useCallback(() => setIsComposerFocus(false), []); - // wrapping into useMemo to stabilize children re-renders as reportMetadata is changed frequently - const showReportActionsLoadingState = useMemo( - () => reportMetadata?.isLoadingInitialReportActions && !reportMetadata?.hasOnceLoadedReportActions, - [reportMetadata?.isLoadingInitialReportActions, reportMetadata?.hasOnceLoadedReportActions], - ); - // Define here because reportActions are recalculated before mount, allowing data to display faster than useEffect can trigger. // If we have cached reportActions, they will be shown immediately. // We aim to display a loader first, then fetch relevant reportActions, and finally show them. @@ -859,7 +833,7 @@ function ReportScreen({route, navigation}: ReportScreenProps) { newTransactions={newTransactions} hasOlderActions={hasOlderActions} hasNewerActions={hasNewerActions} - showReportActionsLoadingState={showReportActionsLoadingState} + showReportActionsLoadingState={reportMetadata?.isLoadingInitialReportActions && !reportMetadata?.hasOnceLoadedReportActions} /> ) : null} {isCurrentReportLoadedFromOnyx ? (