Merge pull request Expensify#74071 from callstack-internal/optionlistcontext-provider-optimization

JS00001 · web-flow · commit 5a8a0785be0d · 2025-12-16T07:34:39.000-05:00
[POC] OptionListContextProvider optimization
diff --git a/src/hooks/useFilteredOptions.ts b/src/hooks/useFilteredOptions.ts
@@ -0,0 +1,123 @@
+import reportsSelector from '@selectors/Attributes';
+import {useEffect, useState} from 'react';
+import type {OnyxEntry} from 'react-native-onyx';
+import {createFilteredOptionList} from '@libs/OptionsListUtils';
+import type {OptionList} from '@libs/OptionsListUtils/types';
+import ONYXKEYS from '@src/ONYXKEYS';
+import type Beta from '@src/types/onyx/Beta';
+import useOnyx from './useOnyx';
+
+type UseFilteredOptionsConfig = {
+    /** Maximum number of recent reports to pre-filter and process (default: 500). */
+    maxRecentReports?: number;
+    /** Whether the hook should be enabled (default: true) */
+    enabled?: boolean;
+    /** Whether to include P2P personal details (default: true) */
+    includeP2P?: boolean;
+    /** Number of reports to load per batch when paginating (default: 100) */
+    batchSize?: number;
+    /** Whether to enable dynamic loading/pagination (default: true) */
+    enablePagination?: boolean;
+    /** Search term for filtering - when present, builds full report map for personal details (default: '') */
+    searchTerm?: string;
+    /** Beta features the user has access to */
+    betas?: OnyxEntry<Beta[]>;
+};
+
+type UseFilteredOptionsResult = {
+    /** The computed options list (reports and personal details) */
+    options: OptionList | null;
+    /** Whether the options are currently being loaded (initial load) */
+    isLoading: boolean;
+    /** Function to load the next batch of reports */
+    loadMore: () => void;
+    /** Whether there are more reports available to load */
+    hasMore: boolean;
+    /** Whether currently loading the next batch */
+    isLoadingMore: boolean;
+};
+
+/**
+ * Hook that provides options list for selection screens with optimized pre-filtering.
+ *
+ * Benefits over OptionListContextProvider:
+ * - Only computes when screen is mounted and enabled
+ * - No background recalculations when screen is not visible
+ * - Smart pre-filtering for performance (top 500 recent reports)
+ * - Recalculates only when dependencies change
+ *
+ * Pre-filtering strategy:
+ * - Filters out null/undefined reports only
+ * - Sorts by lastVisibleActionCreated (most recent first)
+ * - Processes top N reports (default 500)
+ * - Business logic filtering handled by shouldReportBeInOptionList
+ *
+ * Usage:
+ * const {options, isLoading} = useFilteredOptions({
+ *   maxRecentReports: 500,
+ *   enabled: didScreenTransitionEnd,
+ *   betas,
+ * });
+ *
+ * <SelectionList
+ *   sections={isLoading ? [] : sections}
+ *   showLoadingPlaceholder={isLoading}
+ * />
+ */
+function useFilteredOptions(config: UseFilteredOptionsConfig = {}): UseFilteredOptionsResult {
+    const {maxRecentReports = 500, enabled = true, includeP2P = true, batchSize = 100, searchTerm = '', betas} = config;
+
+    const [isLoadingMore, setIsLoadingMore] = useState(false);
+    const [reportsLimit, setReportsLimit] = useState(maxRecentReports);
+
+    const [allReports] = useOnyx(ONYXKEYS.COLLECTION.REPORT, {canBeMissing: true});
+    const [allPersonalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {canBeMissing: true});
+    const [reportAttributesDerived] = useOnyx(ONYXKEYS.DERIVED.REPORT_ATTRIBUTES, {
+        canBeMissing: true,
+        selector: reportsSelector,
+    });
+
+    const totalReports = allReports ? Object.keys(allReports).length : 0;
+
+    const options: OptionList | null =
+        enabled && allReports && allPersonalDetails
+            ? createFilteredOptionList(allPersonalDetails, allReports, reportAttributesDerived, {
+                  maxRecentReports: reportsLimit,
+                  includeP2P,
+                  searchTerm,
+                  betas,
+              })
+            : null;
+
+    // Reset loading state after options are computed
+    useEffect(() => {
+        if (!isLoadingMore || !options) {
+            return;
+        }
+        setIsLoadingMore(false);
+    }, [options, isLoadingMore]);
+
+    const loadMore = () => {
+        if (!options || isLoadingMore) {
+            return;
+        }
+
+        const hasMoreToLoad = options.reports.length < totalReports;
+        if (hasMoreToLoad) {
+            setIsLoadingMore(true);
+            setReportsLimit((prev) => prev + batchSize);
+        }
+    };
+
+    const hasMore = options ? options.reports.length < totalReports : false;
+
+    return {
+        options,
+        isLoading: !options,
+        loadMore,
+        hasMore,
+        isLoadingMore,
+    };
+}
+
+export default useFilteredOptions;
diff --git a/src/libs/OptionsListUtils/index.ts b/src/libs/OptionsListUtils/index.ts
@@ -82,6 +82,7 @@ import {
     isWhisperAction,
     shouldReportActionBeVisible,
 } from '@libs/ReportActionsUtils';
+import {computeReportName} from '@libs/ReportNameUtils';
 import type {OptionData} from '@libs/ReportUtils';
 import {
     canUserPerformWriteAction,
@@ -104,7 +105,6 @@ import {
     getRejectedReportMessage,
     getReportActionActorAccountID,
     getReportLastMessage,
-    getReportName,
     getReportNotificationPreference,
     getReportOrDraftReport,
     getReportPreviewMessage,
@@ -658,8 +658,8 @@ function getLastMessageTextForReport({
             : undefined;
         // For workspace chats, use the report title
         if (reportUtilsIsPolicyExpenseChat(report) && !isEmptyObject(iouReport)) {
-            // eslint-disable-next-line @typescript-eslint/no-deprecated
-            lastMessageTextFromReport = formatReportLastMessageText(getReportName(iouReport));
+            const reportName = computeReportName(iouReport);
+            lastMessageTextFromReport = formatReportLastMessageText(reportName);
         } else {
             const reportPreviewMessage = getReportPreviewMessage(
                 !isEmptyObject(iouReport) ? iouReport : null,
@@ -913,11 +913,12 @@ function createOption(
             showPersonalDetails && personalDetail?.login
                 ? personalDetail.login
                 : getAlternateText(result, {showChatPreviewLine, forcePolicyNamePreview}, !!result.private_isArchived, lastActorDetails);
+
+        const personalDetailsForCompute: PersonalDetailsList | undefined = personalDetails ?? undefined;
+        const computedReportName = computeReportName(report, undefined, undefined, undefined, allReportNameValuePairs, personalDetailsForCompute, undefined);
         reportName = showPersonalDetails
-            ? getDisplayNameForParticipant({accountID: accountIDs.at(0), personalDetailsData: personalDetails ?? undefined, formatPhoneNumber: formatPhoneNumberPhoneUtils}) ||
-              formatPhoneNumberPhoneUtils(personalDetail?.login ?? '')
-            : // eslint-disable-next-line @typescript-eslint/no-deprecated
-              getReportName(report);
+            ? getDisplayNameForParticipant({accountID: accountIDs.at(0), formatPhoneNumber: formatPhoneNumberPhoneUtils}) || formatPhoneNumberPhoneUtils(personalDetail?.login ?? '')
+            : computedReportName;
     } else {
         // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
         reportName =
@@ -934,7 +935,8 @@ function createOption(
     result.subtitle = subtitle;
 
     // Set login and accountID only for single participant cases (used in SearchOption context)
-    if (!hasMultipleParticipants && (!report || (report && !reportUtilsIsGroupChat(report) && !reportUtilsIsChatRoom(report)))) {
+    // Also always set for personal details options (showPersonalDetails: true) to ensure search filtering works correctly
+    if (showPersonalDetails || (!hasMultipleParticipants && (!report || (report && !reportUtilsIsGroupChat(report) && !reportUtilsIsChatRoom(report))))) {
         result.login = personalDetail?.login;
         result.accountID = Number(personalDetail?.accountID);
     }
@@ -965,8 +967,7 @@ function getReportOption(participant: Participant, reportAttributesDerived?: Rep
         // eslint-disable-next-line @typescript-eslint/no-deprecated
         option.alternateText = translateLocal('reportActionsView.yourSpace');
     } else if (option.isInvoiceRoom) {
-        // eslint-disable-next-line @typescript-eslint/no-deprecated
-        option.text = getReportName(report);
+        option.text = computeReportName(report, undefined, undefined, undefined, allReportNameValuePairs, allPersonalDetails, undefined);
         // eslint-disable-next-line @typescript-eslint/no-deprecated
         option.alternateText = translateLocal('workspace.common.invoices');
     } else {
@@ -1015,8 +1016,7 @@ function getReportDisplayOption(report: OnyxEntry<Report>, unknownUserDetails: O
         // eslint-disable-next-line @typescript-eslint/no-deprecated
         option.alternateText = translateLocal('reportActionsView.yourSpace');
     } else if (option.isInvoiceRoom) {
-        // eslint-disable-next-line @typescript-eslint/no-deprecated
-        option.text = getReportName(report);
+        option.text = computeReportName(report, undefined, undefined, undefined, allReportNameValuePairs, allPersonalDetails, undefined);
         // eslint-disable-next-line @typescript-eslint/no-deprecated
         option.alternateText = translateLocal('workspace.common.invoices');
     } else if (unknownUserDetails) {
@@ -1236,6 +1236,119 @@ function createOptionList(personalDetails: OnyxEntry<PersonalDetailsList>, repor
     };
 }
 
+/**
+ * Creates an optimized option list with smart pre-filtering.
+ *
+ * Performance optimization approach:
+ * 1. Pre-filters reports using shouldReportBeInOptionList with correct parameters (betas, etc.)
+ * 2. Sorts by lastVisibleActionCreated (most recent first)
+ * 3. Limits to top N reports
+ * 4. Processes only those N reports
+ *
+ * This avoids processing thousands of reports while ensuring correct filtering.
+ *
+ * Use this for screens that need recent reports (NewChatPage, WorkspaceInvitePage, etc.)
+ */
+function createFilteredOptionList(
+    personalDetails: OnyxEntry<PersonalDetailsList>,
+    reports: OnyxCollection<Report>,
+    reportAttributesDerived: ReportAttributesDerivedValue['reports'] | undefined,
+    options: {
+        maxRecentReports?: number;
+        includeP2P?: boolean;
+        searchTerm?: string;
+        betas?: OnyxEntry<Beta[]>;
+    } = {},
+) {
+    const {maxRecentReports = 500, includeP2P = true, searchTerm = ''} = options;
+    const reportMapForAccountIDs: Record<number, Report> = {};
+
+    // Step 1: Pre-filter reports to avoid processing thousands
+    // Only filter out null/undefined - let shouldReportBeInOptionList handle business logic
+    const reportsArray = Object.values(reports ?? {}).filter((report): report is Report => {
+        return !!report;
+    });
+
+    // Step 2: Sort by lastVisibleActionCreated (most recent first)
+    const sortedReports = reportsArray.sort((a, b) => {
+        const aTime = new Date(a.lastVisibleActionCreated ?? 0).getTime();
+        const bTime = new Date(b.lastVisibleActionCreated ?? 0).getTime();
+        return bTime - aTime;
+    });
+
+    // Step 3: Limit to top N reports
+    const limitedReports = sortedReports.slice(0, maxRecentReports);
+
+    // Step 4: If search term is present, build report map with ONLY 1:1 DM reports
+    // This allows personal details to have valid 1:1 DM reportIDs for proper avatar display
+    // Users without 1:1 DMs will have no report mapped, causing getIcons to fall back to personal avatar
+    if (searchTerm?.trim()) {
+        const allReportsArray = Object.values(reports ?? {});
+
+        // Add ONLY 1:1 DM reports (never add group/policy chats to maintain personal avatars)
+        for (const report of allReportsArray) {
+            if (!report) {
+                continue;
+            }
+
+            // Check if this is a 1:1 DM (not a group/policy/room chat)
+            const is1on1DM = reportUtilsIsOneOnOneChat(report);
+
+            if (is1on1DM) {
+                const accountIDs = getParticipantsAccountIDsForDisplay(report);
+                for (const accountID of accountIDs) {
+                    // ALWAYS set 1:1 DMs - prioritize them over policy/group chats
+                    // This ensures proper avatar display for personal details
+                    reportMapForAccountIDs[accountID] = report;
+                }
+            }
+        }
+    }
+
+    // Step 5: Process the limited set of reports (performance optimization)
+    const reportOptions: Array<SearchOption<Report>> = [];
+    for (const report of limitedReports) {
+        const {reportMapEntry, reportOption} = processReport(report, personalDetails, reportAttributesDerived);
+
+        if (reportMapEntry) {
+            const [accountID, reportValue] = reportMapEntry;
+
+            // Preserve 1:1 DMs from Step 4 - don't overwrite them with non-1:1 reports
+            const existing = reportMapForAccountIDs[accountID];
+            const existingIs1on1 = existing && reportUtilsIsOneOnOneChat(existing);
+            const newIs1on1 = reportUtilsIsOneOnOneChat(reportValue);
+
+            // Only overwrite if: no existing, existing is not 1:1, or both are 1:1 (prefer newer)
+            const shouldOverwrite = !existing || !existingIs1on1 || newIs1on1;
+
+            if (shouldOverwrite) {
+                reportMapForAccountIDs[accountID] = reportValue;
+            }
+        }
+
+        if (reportOption) {
+            reportOptions.push(reportOption);
+        }
+    }
+
+    // Step 6: Process personal details (all of them - needed for search functionality)
+    const personalDetailsOptions = includeP2P
+        ? Object.values(personalDetails ?? {}).map((personalDetail) => {
+              const accountID = personalDetail?.accountID ?? CONST.DEFAULT_NUMBER_ID;
+
+              return {
+                  item: personalDetail,
+                  ...createOption([accountID], personalDetails, reportMapForAccountIDs[accountID], {showPersonalDetails: true}, reportAttributesDerived),
+              };
+          })
+        : [];
+
+    return {
+        reports: reportOptions,
+        personalDetails: personalDetailsOptions as Array<SearchOption<PersonalDetails>>,
+    };
+}
+
 function createOptionFromReport(report: Report, personalDetails: OnyxEntry<PersonalDetailsList>, reportAttributesDerived?: ReportAttributesDerivedValue['reports'], config?: PreviewConfig) {
     const accountIDs = getParticipantsAccountIDsForDisplay(report);
 
@@ -2812,6 +2925,7 @@ export {
     combineOrderingOfReportsAndPersonalDetails,
     createOptionFromReport,
     createOptionList,
+    createFilteredOptionList,
     createOption,
     filterAndOrderOptions,
     filterOptions,
diff --git a/src/pages/NewChatPage.tsx b/src/pages/NewChatPage.tsx
