Merge pull request Expensify#90478 from callstack-internal/perf/search-list-violations-per-row

perf: scope Search list violations subscription per row

Author: mountiny

src/components/Search/SearchList/ListItem/TransactionListItem/index.tsx

@@ -42,7 +42,6 @@ function TransactionListItem<TItem extends ListItem>({
     shouldSyncFocus,
     columns,
     isLoading,
-    violations,
     nonPersonalAndWorkspaceCards,
     lastPaymentMethod,
     personalPolicyID,
@@ -84,6 +83,7 @@ function TransactionListItem<TItem extends ListItem>({
     const [parentReport] = originalUseOnyx(`${ONYXKEYS.COLLECTION.REPORT}${getNonEmptyStringOnyxID(transactionItem.reportID)}`);
     const [transactionThreadReport] = originalUseOnyx(`${ONYXKEYS.COLLECTION.REPORT}${transactionItem?.reportAction?.childReportID}`);
     const [transaction] = originalUseOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${getNonEmptyStringOnyxID(transactionItem.transactionID)}`);
+    const [transactionViolationsForRow] = originalUseOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS}${getNonEmptyStringOnyxID(transactionItem.transactionID)}`);
     const parentReportActionSelector = (reportActions: OnyxEntry<ReportActions>): OnyxEntry<ReportAction> => reportActions?.[`${transactionItem?.reportAction?.reportActionID}`];
     const [parentReportAction] = originalUseOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${getNonEmptyStringOnyxID(transactionItem.reportID)}`, {selector: parentReportActionSelector}, [
         transactionItem,
@@ -103,7 +103,7 @@ function TransactionListItem<TItem extends ListItem>({
     const policyForViolations = parentPolicy ?? snapshotPolicy;
     const reportForViolations = parentReport ?? snapshotReport;
 
-    const onyxViolations = (violations?.[`${ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS}${transactionItem.transactionID}`] ?? []).filter(
+    const onyxViolations = (transactionViolationsForRow ?? []).filter(
         (violation: TransactionViolation) =>
             !isViolationDismissed(transactionItem, violation, currentUserDetails.email ?? '', currentUserDetails.accountID, reportForViolations, policyForViolations) &&
             shouldShowViolation(reportForViolations, policyForViolations, violation.name, currentUserDetails.email ?? '', false, transactionItem),

src/components/Search/SearchList/ListItem/types.ts

@@ -420,7 +420,6 @@ type TransactionListItemProps<TItem extends ListItem> = ListItemProps<TItem> &
         /** Whether the item's action is loading */
         isLoading?: boolean;
         columns?: SearchColumnType[];
-        violations?: Record<string, TransactionViolations | undefined> | undefined;
         policyForMovingExpenses?: Policy;
         /** Non-personal and workspace cards for company card display */
         nonPersonalAndWorkspaceCards?: CardList;
@@ -435,7 +434,6 @@ type TransactionGroupListItemProps<TItem extends ListItem> = ListItemProps<TItem
         accountID?: number;
         columns?: SearchColumnType[];
         newTransactionID?: string;
-        violations?: Record<string, TransactionViolations | undefined> | undefined;
         policyForMovingExpenses?: Policy;
         /** Non-personal and workspace cards for company card display */
         nonPersonalAndWorkspaceCards?: CardList;
@@ -452,12 +450,12 @@ type TransactionGroupListExpandedProps<TItem extends ListItem> = Pick<
     | 'groupBy'
     | 'accountID'
     | 'isOffline'
-    | 'violations'
     | 'onSelectRow'
     | 'nonPersonalAndWorkspaceCards'
     | 'onUndelete'
     | 'policyForMovingExpenses'
 > & {
+    violations?: Record<string, TransactionViolations | undefined> | undefined;
     transactions: TransactionListItemType[];
     transactionsVisibleLimit: number;
     setTransactionsVisibleLimit: React.Dispatch<React.SetStateAction<number>>;

src/components/Search/SearchList/index.tsx

@@ -35,7 +35,7 @@ import variables from '@styles/variables';
 import type {TransactionPreviewData} from '@userActions/Search';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type {CardList, Policy, Transaction, TransactionViolations} from '@src/types/onyx';
+import type {CardList, Policy, Transaction} from '@src/types/onyx';
 import type {HoldMenuCallback} from '..';
 import BaseSearchList from './BaseSearchList';
 import type ChatListItem from './ListItem/ChatListItem';
@@ -118,9 +118,6 @@ type SearchListProps = Pick<FlashListProps<SearchListItem>, 'onScroll' | 'conten
 
     newTransactions?: Transaction[];
 
-    /** Violations indexed by transaction ID */
-    violations?: Record<string, TransactionViolations | undefined> | undefined;
-
     /** Callback to fire when hold menu should be opened */
     onHoldMenuOpen?: HoldMenuCallback;
 
@@ -217,7 +214,6 @@ function SearchList({
     shouldAnimate,
     isMobileSelectionModeEnabled,
     newTransactions = [],
-    violations,
     onHoldMenuOpen,
     nonPersonalAndWorkspaceCards,
     selectedTransactions,
@@ -455,7 +451,6 @@ function SearchList({
                         personalDetails={personalDetails}
                         userBillingFundID={userBillingFundID}
                         isOffline={isOffline}
-                        violations={violations}
                         nonPersonalAndWorkspaceCards={nonPersonalAndWorkspaceCards}
                         onFocus={onFocus}
                         newTransactionID={newTransactionID}
@@ -485,7 +480,6 @@ function SearchList({
             personalDetails,
             userBillingFundID,
             isOffline,
-            violations,
             lastPaymentMethod,
             personalPolicyID,
             onHoldMenuOpen,

src/components/Search/index.tsx

@@ -1853,7 +1853,6 @@ function Search({
                     }
                     queryJSON={queryJSON}
                     columns={columnsToShow}
-                    violations={violations}
                     onLayout={onLayout}
                     isMobileSelectionModeEnabled={isMobileSelectionModeEnabled}
                     shouldAnimate={type === CONST.SEARCH.DATA_TYPES.EXPENSE}