perf: make switch between chat list and workspaces smoother

src/App.tsx

@@ -30,6 +30,7 @@ import {KeyboardStateProvider} from './components/withKeyboardState';
 import {WindowDimensionsProvider} from './components/withWindowDimensions';
 import Expensify from './Expensify';
 import useDefaultDragAndDrop from './hooks/useDefaultDragAndDrop';
+import {ReportIDsContextProvider} from './hooks/useReportIDs';
 import OnyxUpdateManager from './libs/actions/OnyxUpdateManager';
 import {ReportAttachmentsProvider} from './pages/home/report/ReportAttachmentsContext';
 import type {Route} from './ROUTES';
@@ -75,6 +76,7 @@ function App({url}: AppProps) {
                         CustomStatusBarAndBackgroundContextProvider,
                         ActiveElementRoleProvider,
                         ActiveWorkspaceContextProvider,
+                        ReportIDsContextProvider,
                         PlaybackContextProvider,
                         VolumeContextProvider,
                         VideoPopoverMenuContextProvider,

src/components/withCurrentReportID.tsx

@@ -39,7 +39,17 @@ function CurrentReportIDContextProvider(props: CurrentReportIDContextProviderPro
      */
     const updateCurrentReportID = useCallback(
         (state: NavigationState) => {
-            setCurrentReportID(Navigation.getTopmostReportId(state) ?? '');
+            const reportID = Navigation.getTopmostReportId(state) ?? '';
+
+            /*
+             * Make sure we don't make the reportID undefined when switching between the chat list and settings tab.
+             * This helps prevent unnecessary re-renders.
+             */
+            const params = state?.routes?.[state.index]?.params;
+            if (params && 'screen' in params && typeof params.screen === 'string' && params.screen.indexOf('Settings_') !== -1) {
+                return;
+            }
+            setCurrentReportID(reportID);
         },
         [setCurrentReportID],
     );

src/hooks/useReportIDs.tsx

@@ -0,0 +1,133 @@
+import React, {createContext, useCallback, useContext, useMemo} from 'react';
+import {withOnyx} from 'react-native-onyx';
+import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
+import {getCurrentUserAccountID} from '@libs/actions/Report';
+import {getPolicyMembersByIdWithoutCurrentUser} from '@libs/PolicyUtils';
+import SidebarUtils from '@libs/SidebarUtils';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import type {Beta, Policy, PolicyMembers, PriorityMode, Report, ReportActions, TransactionViolation} from '@src/types/onyx';
+import useActiveWorkspace from './useActiveWorkspace';
+import useCurrentReportID from './useCurrentReportID';
+
+type OnyxProps = {
+    chatReports: OnyxCollection<Report>;
+    betas: OnyxEntry<Beta[]>;
+    policies: OnyxCollection<Policy>;
+    allReportActions: OnyxCollection<ReportActions>;
+    transactionViolations: OnyxCollection<TransactionViolation[]>;
+    policyMembers: OnyxCollection<PolicyMembers>;
+    priorityMode: OnyxEntry<PriorityMode>;
+};
+
+type WithReportIDsContextProviderProps = OnyxProps & {
+    children: React.ReactNode;
+    currentReportIDForTests?: string;
+};
+
+type ReportIDsContextValue = {
+    orderedReportIDs: string[];
+    currentReportID: string;
+};
+
+const ReportIDsContext = createContext<ReportIDsContextValue>({
+    orderedReportIDs: [],
+    currentReportID: '',
+});
+
+function WithReportIDsContextProvider({
+    children,
+    chatReports,
+    betas,
+    policies,
+    allReportActions,
+    transactionViolations,
+    policyMembers,
+    priorityMode,
+    /**
+     * Only required to make unit tests work, since we
+     * explicitly pass the currentReportID in LHNTestUtils
+     * to SidebarLinksData, so this context doesn't have
+     * access to currentReportID in that case.
+     *
+     * This is a workaround to have currentReportID available in testing environment.
+     */
+    currentReportIDForTests,
+}: WithReportIDsContextProviderProps) {
+    const currentReportIDValue = useCurrentReportID();
+    const derivedCurrentReportID = currentReportIDForTests ?? currentReportIDValue?.currentReportID;
+    const {activeWorkspaceID} = useActiveWorkspace();
+
+    const policyMemberAccountIDs = useMemo(() => getPolicyMembersByIdWithoutCurrentUser(policyMembers, activeWorkspaceID, getCurrentUserAccountID()), [activeWorkspaceID, policyMembers]);
+
+    const getOrderedReportIDs = useCallback(
+        (currentReportID?: string) =>
+            SidebarUtils.getOrderedReportIDs(
+                currentReportID ?? null,
+                chatReports,
+                betas ?? [],
+                policies,
+                priorityMode,
+                allReportActions,
+                transactionViolations,
+                activeWorkspaceID,
+                policyMemberAccountIDs,
+            ),
+        [chatReports, betas, policies, priorityMode, allReportActions, transactionViolations, activeWorkspaceID, policyMemberAccountIDs],
+    );
+
+    const orderedReportIDs = useMemo(() => getOrderedReportIDs(), [getOrderedReportIDs]);
+    const contextValue: ReportIDsContextValue = useMemo(() => {
+        // We need to make sure the current report is in the list of reports, but we do not want
+        // to have to re-generate the list every time the currentReportID changes. To do that
+        // we first generate the list as if there was no current report, then we check if
+        // the current report is missing from the list, which should very rarely happen. In this
+        // case we re-generate the list a 2nd time with the current report included.
+        if (derivedCurrentReportID && !orderedReportIDs.includes(derivedCurrentReportID)) {
+            return {orderedReportIDs: getOrderedReportIDs(derivedCurrentReportID), currentReportID: derivedCurrentReportID ?? ''};
+        }
+
+        return {
+            orderedReportIDs: getOrderedReportIDs(),
+            currentReportID: derivedCurrentReportID ?? '',
+        };
+    }, [getOrderedReportIDs, orderedReportIDs, derivedCurrentReportID]);
+
+    return <ReportIDsContext.Provider value={contextValue}>{children}</ReportIDsContext.Provider>;
+}
+
+const ReportIDsContextProvider = withOnyx<WithReportIDsContextProviderProps, OnyxProps>({
+    chatReports: {
+        key: ONYXKEYS.COLLECTION.REPORT,
+        initialValue: {},
+    },
+    priorityMode: {
+        key: ONYXKEYS.NVP_PRIORITY_MODE,
+        initialValue: CONST.PRIORITY_MODE.DEFAULT,
+    },
+    betas: {
+        key: ONYXKEYS.BETAS,
+        initialValue: [],
+    },
+    allReportActions: {
+        key: ONYXKEYS.COLLECTION.REPORT_ACTIONS,
+        initialValue: {},
+    },
+    policies: {
+        key: ONYXKEYS.COLLECTION.POLICY,
+        initialValue: {},
+    },
+    policyMembers: {
+        key: ONYXKEYS.COLLECTION.POLICY_MEMBERS,
+    },
+    transactionViolations: {
+        key: ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS,
+        initialValue: {},
+    },
+})(WithReportIDsContextProvider);
+
+function useReportIDs() {
+    return useContext(ReportIDsContext);
+}
+
+export {ReportIDsContextProvider, ReportIDsContext, useReportIDs};

src/libs/SidebarUtils.ts

@@ -2,14 +2,13 @@
 import Str from 'expensify-common/lib/str';
 import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
 import Onyx from 'react-native-onyx';
-import type {ValueOf} from 'type-fest';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type {PersonalDetails, PersonalDetailsList, TransactionViolation} from '@src/types/onyx';
+import type {PersonalDetails, PersonalDetailsList, ReportActions, TransactionViolation} from '@src/types/onyx';
 import type Beta from '@src/types/onyx/Beta';
 import type Policy from '@src/types/onyx/Policy';
+import type PriorityMode from '@src/types/onyx/PriorityMode';
 import type Report from '@src/types/onyx/Report';
-import type {ReportActions} from '@src/types/onyx/ReportAction';
 import type ReportAction from '@src/types/onyx/ReportAction';
 import type DeepValueOf from '@src/types/utils/DeepValueOf';
 import * as CollectionUtils from './CollectionUtils';
@@ -62,18 +61,18 @@ function compareStringDates(a: string, b: string): 0 | 1 | -1 {
  */
 function getOrderedReportIDs(
     currentReportId: string | null,
-    allReports: Record<string, Report>,
-    betas: Beta[],
-    policies: Record<string, Policy>,
-    priorityMode: ValueOf<typeof CONST.PRIORITY_MODE>,
-    allReportActions: OnyxCollection<ReportAction[]>,
+    allReports: OnyxCollection<Report>,
+    betas: OnyxEntry<Beta[]>,
+    policies: OnyxCollection<Policy>,
+    priorityMode: OnyxEntry<PriorityMode>,
+    allReportActions: OnyxCollection<ReportActions>,
     transactionViolations: OnyxCollection<TransactionViolation[]>,
     currentPolicyID = '',
     policyMemberAccountIDs: number[] = [],
 ): string[] {
     const isInGSDMode = priorityMode === CONST.PRIORITY_MODE.GSD;
     const isInDefaultMode = !isInGSDMode;
-    const allReportsDictValues = Object.values(allReports);
+    const allReportsDictValues = Object.values(allReports ?? {});
 
     // Filter out all the reports that shouldn't be displayed
     let reportsToDisplay = allReportsDictValues.filter((report) => {
@@ -84,14 +83,14 @@ function getOrderedReportIDs(
         const parentReportActionsKey = `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report.parentReportID}`;
         const parentReportActions = allReportActions?.[parentReportActionsKey];
         const reportActions = ReportActionsUtils.getAllReportActions(report.reportID);
-        const parentReportAction = parentReportActions?.find((action) => action && action?.reportActionID === report.parentReportActionID);
+        const parentReportAction = parentReportActions?.[report?.parentReportActionID ?? ''];
         const doesReportHaveViolations =
-            betas.includes(CONST.BETAS.VIOLATIONS) && !!parentReportAction && ReportUtils.doesTransactionThreadHaveViolations(report, transactionViolations, parentReportAction);
+            !!betas && betas.includes(CONST.BETAS.VIOLATIONS) && !!parentReportAction && ReportUtils.doesTransactionThreadHaveViolations(report, transactionViolations, parentReportAction);
         const isHidden = report.notificationPreference === CONST.REPORT.NOTIFICATION_PREFERENCE.HIDDEN;
         const isFocused = report.reportID === currentReportId;
         const hasErrors = Object.keys(OptionsListUtils.getAllReportErrors(report, reportActions) ?? {}).length !== 0;
         const hasBrickError = hasErrors || doesReportHaveViolations ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : '';
-        const shouldOverrideHidden = hasBrickError || isFocused || report.isPinned;
+        const shouldOverrideHidden = hasBrickError || isFocused || report?.isPinned;
         if (isHidden && !shouldOverrideHidden) {
             return false;
         }
@@ -100,7 +99,7 @@ function getOrderedReportIDs(
             report,
             currentReportId: currentReportId ?? '',
             isInGSDMode,
-            betas,
+            betas: betas ?? [],
             policies,
             excludeEmptyChats: true,
             doesReportHaveViolations,
@@ -131,12 +130,18 @@ function getOrderedReportIDs(
     const archivedReports: Report[] = [];
 
     if (currentPolicyID || policyMemberAccountIDs.length > 0) {
-        reportsToDisplay = reportsToDisplay.filter(
-            (report) => report.reportID === currentReportId || ReportUtils.doesReportBelongToWorkspace(report, policyMemberAccountIDs, currentPolicyID),
-        );
+        reportsToDisplay = reportsToDisplay.filter((report) => {
+            if (!report) {
+                return false;
+            }
+            return report.reportID === currentReportId || ReportUtils.doesReportBelongToWorkspace(report, policyMemberAccountIDs, currentPolicyID);
+        });
     }
     // There are a few properties that need to be calculated for the report which are used when sorting reports.
     reportsToDisplay.forEach((report) => {
+        if (!report) {
+            return;
+        }
         // Normally, the spread operator would be used here to clone the report and prevent the need to reassign the params.
         // However, this code needs to be very performant to handle thousands of reports, so in the interest of speed, we're just going to disable this lint rule and add
         // the reportDisplayName property to the report object directly.