Skip to content

Revert "[Perf] Scope REPORT_ACTIONS subscription to per-row level in LHNOptionsList " #86651

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
srikarparsi merged 1 commit into from
Mar 30, 2026
+154 −168
Merged

Revert "[Perf] Scope REPORT_ACTIONS subscription to per-row level in LHNOptionsList " #86651

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
92 changes: 89 additions & 3 deletions src/components/LHNOptionsList/LHNOptionsList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import {FlashList} from '@shopify/flash-list';
import type {ReactElement} from 'react';
import React, {memo, useCallback, useContext, useEffect, useMemo, useRef} from 'react';
import {StyleSheet, View} from 'react-native';
import type {OnyxEntry} from 'react-native-onyx';
import type {BlockingViewProps} from '@components/BlockingViews/BlockingView';
import BlockingView from '@components/BlockingViews/BlockingView';
import Icon from '@components/Icon';
Expand All @@ -23,6 +24,8 @@ import useTheme from '@hooks/useTheme';
import useThemeStyles from '@hooks/useThemeStyles';
import getPlatform from '@libs/getPlatform';
import Log from '@libs/Log';
import {getLastVisibleActionIncludingTransactionThread, getOriginalMessage, isActionableTrackExpense, isInviteOrRemovedAction} from '@libs/ReportActionsUtils';
import {canUserPerformWriteAction as canUserPerformWriteActionUtil} from '@libs/ReportUtils';
import variables from '@styles/variables';
import CONST from '@src/CONST';
import NAVIGATORS from '@src/NAVIGATORS';
Expand All @@ -47,11 +50,15 @@ function LHNOptionsList({style, contentContainerStyles, data, onSelectRow, optio
const [reports] = useOnyx(ONYXKEYS.COLLECTION.REPORT);
const reportAttributes = useReportAttributes();
const [reportNameValuePairs] = useOnyx(ONYXKEYS.COLLECTION.REPORT_NAME_VALUE_PAIRS);
const [reportActions] = useOnyx(ONYXKEYS.COLLECTION.REPORT_ACTIONS);
const [policy] = useOnyx(ONYXKEYS.COLLECTION.POLICY);
const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST);
const [transactions] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION);
const [draftComments] = useOnyx(ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT);
const [introSelected] = useOnyx(ONYXKEYS.NVP_INTRO_SELECTED);
const [onboarding] = useOnyx(ONYXKEYS.NVP_ONBOARDING);
const [isFullscreenVisible] = useOnyx(ONYXKEYS.FULLSCREEN_VISIBILITY);
const [visibleReportActionsData] = useOnyx(ONYXKEYS.DERIVED.VISIBLE_REPORT_ACTIONS);
const {accountID: currentUserAccountID} = useCurrentUserPersonalDetails();

const theme = useTheme();
Expand Down Expand Up @@ -153,8 +160,12 @@ function LHNOptionsList({style, contentContainerStyles, data, onSelectRow, optio
const renderItem = useCallback(
({item, index}: RenderItemProps): ReactElement => {
const reportID = item.reportID;
const itemReportAttributes = reportAttributes?.[reportID];
const itemParentReport = reports?.[`${ONYXKEYS.COLLECTION.REPORT}${item.parentReportID}`];
const itemReportNameValuePairs = reportNameValuePairs?.[`${ONYXKEYS.COLLECTION.REPORT_NAME_VALUE_PAIRS}${reportID}`];
const itemOneTransactionThreadReport = reports?.[`${ONYXKEYS.COLLECTION.REPORT}${itemReportAttributes?.oneTransactionThreadReportID}`];
const itemParentReportActions = reportActions?.[`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${item?.parentReportID}`];
const itemParentReportAction = item?.parentReportActionID ? itemParentReportActions?.[item?.parentReportActionID] : undefined;

let invoiceReceiverPolicyID = '-1';
if (item?.invoiceReceiver && 'policyID' in item.invoiceReceiver) {
Expand All @@ -166,19 +177,54 @@ function LHNOptionsList({style, contentContainerStyles, data, onSelectRow, optio
const itemInvoiceReceiverPolicy = policy?.[`${ONYXKEYS.COLLECTION.POLICY}${invoiceReceiverPolicyID}`];

const itemPolicy = policy?.[`${ONYXKEYS.COLLECTION.POLICY}${item?.policyID}`];
const hasDraftComment =
!!draftComments?.[`${ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT}${reportID}`] &&
!draftComments?.[`${ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT}${reportID}`]?.match(CONST.REGEX.EMPTY_COMMENT);

const isReportArchived = !!itemReportNameValuePairs?.private_isArchived;
const canUserPerformWrite = canUserPerformWriteActionUtil(item, isReportArchived);

const lastAction = getLastVisibleActionIncludingTransactionThread(
reportID,
canUserPerformWrite,
reportActions,
visibleReportActionsData,
itemOneTransactionThreadReport?.reportID,
);
Comment on lines +190 to +193
Copy link
Copy Markdown

@chatgpt-codex-connector chatgpt-codex-connector bot Mar 30, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P1 Badge Use derived thread ID when resolving the last visible action

Passing itemOneTransactionThreadReport?.reportID drops the transaction-thread context whenever the child report object is not yet hydrated in reports, even though reportAttributes already contains oneTransactionThreadReportID. In that state, getLastVisibleActionIncludingTransactionThread() ignores thread actions and can show stale/missing LHN preview text (and related metadata) until hydration completes. Use the derived thread ID directly instead of reading it from the optional report object.

Useful? React with 👍 / 👎.


// Only override lastMessageTextFromReport when a track expense whisper's transaction has been deleted, to prevent showing stale text.
let lastMessageTextFromReport: string | undefined;
if (isActionableTrackExpense(lastAction)) {
const whisperTransactionID = getOriginalMessage(lastAction)?.transactionID;
if (whisperTransactionID && !transactions?.[`${ONYXKEYS.COLLECTION.TRANSACTION}${whisperTransactionID}`]) {
lastMessageTextFromReport = '';
}
}
const shouldShowRBRorGBRTooltip = firstReportIDWithGBRorRBR === reportID;

let lastActionReport: OnyxEntry<Report> | undefined;
if (isInviteOrRemovedAction(lastAction)) {
const lastActionOriginalMessage = lastAction?.actionName ? getOriginalMessage(lastAction) : null;
lastActionReport = reports?.[`${ONYXKEYS.COLLECTION.REPORT}${lastActionOriginalMessage?.reportID}`];
}

return (
<OptionRowLHNData
reportID={reportID}
fullReport={item}
reportAttributes={itemReportAttributes}
reportAttributesDerived={reportAttributes}
oneTransactionThreadReport={itemOneTransactionThreadReport}
reportNameValuePairs={itemReportNameValuePairs}
parentReportAction={itemParentReportAction}
policy={itemPolicy}
invoiceReceiverPolicy={itemInvoiceReceiverPolicy}
personalDetails={personalDetails ?? {}}
viewMode={optionMode}
isOptionFocused={!shouldDisableFocusOptions}
lastMessageTextFromReport={lastMessageTextFromReport}
onSelectRow={onSelectRow}
hasDraftComment={hasDraftComment}
onLayout={onLayoutItem}
shouldShowRBRorGBRTooltip={shouldShowRBRorGBRTooltip}
onboardingPurpose={introSelected?.choice}
Expand All @@ -189,14 +235,21 @@ function LHNOptionsList({style, contentContainerStyles, data, onSelectRow, optio
localeCompare={localeCompare}
translate={translate}
testID={index}
isReportArchived={isReportArchived}
lastAction={lastAction}
lastActionReport={lastActionReport}
currentUserAccountID={currentUserAccountID}
/>
);
},
[
reportAttributes,
reports,
reportNameValuePairs,
reportActions,
policy,
transactions,
draftComments,
personalDetails,
firstReportIDWithGBRorRBR,
isFullscreenVisible,
Expand All @@ -210,13 +263,45 @@ function LHNOptionsList({style, contentContainerStyles, data, onSelectRow, optio
isScreenFocused,
localeCompare,
translate,
visibleReportActionsData,
currentUserAccountID,
],
);

const extraData = useMemo(
() => [reports, reportNameValuePairs, policy, personalDetails, data.length, optionMode, isOffline, isScreenFocused, isReportsSplitNavigatorLast],
[reports, reportNameValuePairs, policy, personalDetails, data.length, optionMode, isOffline, isScreenFocused, isReportsSplitNavigatorLast],
() => [
reportActions,
reportAttributes,
reports,
reportAttributes,
reportNameValuePairs,
policy,
personalDetails,
data.length,
optionMode,
transactions,
draftComments,
isOffline,
isScreenFocused,
isReportsSplitNavigatorLast,
visibleReportActionsData,
],
[
reportActions,
reportAttributes,
reports,
reportNameValuePairs,
policy,
personalDetails,
data.length,
optionMode,
transactions,
draftComments,
isOffline,
isScreenFocused,
isReportsSplitNavigatorLast,
visibleReportActionsData,
],
);

const previousOptionMode = usePrevious(optionMode);
Expand Down Expand Up @@ -271,13 +356,14 @@ function LHNOptionsList({style, contentContainerStyles, data, onSelectRow, optio
if (shouldShowEmptyLHN) {
Log.info('Woohoo! All caught up. Was rendered', false, {
reportsCount: Object.keys(reports ?? {}).length,
reportActionsCount: Object.keys(reportActions ?? {}).length,
policyCount: Object.keys(policy ?? {}).length,
personalDetailsCount: Object.keys(personalDetails ?? {}).length,
route,
reportsIDsFromUseReportsCount: data.length,
});
}
}, [data.length, shouldShowEmptyLHN, route, reports, policy, personalDetails]);
}, [data.length, shouldShowEmptyLHN, route, reports, reportActions, policy, personalDetails]);

return (
<View style={[style ?? styles.flex1, shouldShowEmptyLHN ? styles.emptyLHNWrapper : undefined]}>
Expand Down
Loading
Loading