perf: make switch between chat list and workspaces smoother

src/App.tsx

@@ -27,6 +27,8 @@ import {KeyboardStateProvider} from './components/withKeyboardState';
 import {WindowDimensionsProvider} from './components/withWindowDimensions';
 import Expensify from './Expensify';
 import useDefaultDragAndDrop from './hooks/useDefaultDragAndDrop';
+import {OrderedReportIDsContextProvider} from './hooks/useOrderedReportIDs';
+import {ReportsContextProvider} from './hooks/useReports';
 import OnyxUpdateManager from './libs/actions/OnyxUpdateManager';
 import * as Session from './libs/actions/Session';
 import * as Environment from './libs/Environment/Environment';
@@ -81,6 +83,8 @@ function App({url}: AppProps) {
                         CustomStatusBarAndBackgroundContextProvider,
                         ActiveElementRoleProvider,
                         ActiveWorkspaceContextProvider,
+                        ReportsContextProvider,
+                        OrderedReportIDsContextProvider,
                     ]}
                 >
                     <CustomStatusBarAndBackground />

src/components/LHNOptionsList/LHNOptionsList.tsx

@@ -1,40 +1,27 @@
-import {FlashList} from '@shopify/flash-list';
 import type {ReactElement} from 'react';
-import React, {memo, useCallback} from 'react';
-import {StyleSheet, View} from 'react-native';
-import {withOnyx} from 'react-native-onyx';
-import withCurrentReportID from '@components/withCurrentReportID';
-import usePermissions from '@hooks/usePermissions';
+import React, {useCallback, memo} from 'react';
+import {FlatList, StyleSheet, View} from 'react-native';
 import useThemeStyles from '@hooks/useThemeStyles';
-import * as ReportActionsUtils from '@libs/ReportActionsUtils';
-import variables from '@styles/variables';
-import CONST from '@src/CONST';
-import ONYXKEYS from '@src/ONYXKEYS';
 import OptionRowLHNData from './OptionRowLHNData';
-import type {LHNOptionsListOnyxProps, LHNOptionsListProps, RenderItemProps} from './types';
+import type {LHNOptionsListProps, RenderItemProps} from './types';
+import { OrderedReports } from '@libs/SidebarUtils';
+import CONST from '@src/CONST';
+import variables from '@styles/variables';
+import { FlashList } from '@shopify/flash-list';
 
-const keyExtractor = (item: string) => `report_${item}`;
+const keyExtractor = (item: OrderedReports) => `report_${item?.reportID}`;
 
 function LHNOptionsList({
     style,
     contentContainerStyles,
     data,
     onSelectRow,
-    optionMode,
     shouldDisableFocusOptions = false,
-    reports = {},
-    reportActions = {},
-    policy = {},
-    preferredLocale = CONST.LOCALES.DEFAULT,
-    personalDetails = {},
-    transactions = {},
     currentReportID = '',
-    draftComments = {},
-    transactionViolations = {},
+    optionMode,
     onFirstItemRendered = () => {},
 }: LHNOptionsListProps) {
     const styles = useThemeStyles();
-    const {canUseViolations} = usePermissions();
 
     // When the first item renders we want to call the onFirstItemRendered callback.
     // At this point in time we know that the list is actually displaying items.
@@ -52,78 +39,38 @@ function LHNOptionsList({
      * Function which renders a row in the list
      */
     const renderItem = useCallback(
-        ({item: reportID}: RenderItemProps): ReactElement => {
-            const itemFullReport = reports?.[`${ONYXKEYS.COLLECTION.REPORT}${reportID}`] ?? null;
-            const itemReportActions = reportActions?.[`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`] ?? null;
-            const itemParentReportActions = reportActions?.[`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${itemFullReport?.parentReportID}`] ?? null;
-            const itemParentReportAction = itemParentReportActions?.[itemFullReport?.parentReportActionID ?? ''] ?? null;
-            const itemPolicy = policy?.[`${ONYXKEYS.COLLECTION.POLICY}${itemFullReport?.policyID}`] ?? null;
-            const transactionID = itemParentReportAction?.actionName === CONST.REPORT.ACTIONS.TYPE.IOU ? itemParentReportAction.originalMessage.IOUTransactionID ?? '' : '';
-            const itemTransaction = transactions?.[`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`] ?? null;
-            const itemComment = draftComments?.[`${ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT}${reportID}`] ?? '';
-            const sortedReportActions = ReportActionsUtils.getSortedReportActionsForDisplay(itemReportActions);
-            const lastReportAction = sortedReportActions[0];
-
-            // Get the transaction for the last report action
-            let lastReportActionTransactionID = '';
-
-            if (lastReportAction?.actionName === CONST.REPORT.ACTIONS.TYPE.IOU) {
-                lastReportActionTransactionID = lastReportAction.originalMessage?.IOUTransactionID ?? '';
-            }
-            const lastReportActionTransaction = transactions?.[`${ONYXKEYS.COLLECTION.TRANSACTION}${lastReportActionTransactionID}`] ?? {};
+        ({item}: RenderItemProps): ReactElement => {
 
             return (
                 <OptionRowLHNData
-                    reportID={reportID}
-                    fullReport={itemFullReport}
-                    reportActions={itemReportActions}
-                    parentReportAction={itemParentReportAction}
-                    policy={itemPolicy}
-                    personalDetails={personalDetails ?? {}}
-                    transaction={itemTransaction}
-                    lastReportActionTransaction={lastReportActionTransaction}
-                    receiptTransactions={transactions}
-                    viewMode={optionMode}
-                    isFocused={!shouldDisableFocusOptions && reportID === currentReportID}
+                    reportID={item?.reportID}
+                    isFocused={!shouldDisableFocusOptions && item?.reportID === currentReportID}
                     onSelectRow={onSelectRow}
-                    preferredLocale={preferredLocale}
-                    comment={itemComment}
-                    transactionViolations={transactionViolations}
-                    canUseViolations={canUseViolations}
+                    comment={item?.comment}
+                    optionItem={item?.optionItem}
                     onLayout={onLayoutItem}
                 />
             );
         },
         [
             currentReportID,
-            draftComments,
             onSelectRow,
-            optionMode,
-            personalDetails,
-            policy,
-            preferredLocale,
-            reportActions,
-            reports,
-            shouldDisableFocusOptions,
-            transactions,
-            transactionViolations,
-            canUseViolations,
             onLayoutItem,
         ],
     );
 
     return (
         <View style={style ?? styles.flex1}>
-            <FlashList
+            <FlatList
                 indicatorStyle="white"
                 keyboardShouldPersistTaps="always"
                 contentContainerStyle={StyleSheet.flatten(contentContainerStyles)}
                 data={data}
                 testID="lhn-options-list"
                 keyExtractor={keyExtractor}
                 renderItem={renderItem}
-                estimatedItemSize={optionMode === CONST.OPTION_MODE.COMPACT ? variables.optionRowHeightCompact : variables.optionRowHeight}
-                extraData={[currentReportID]}
+                // estimatedItemSize={optionMode === CONST.OPTION_MODE.COMPACT ? variables.optionRowHeightCompact : variables.optionRowHeight}
+                // extraData={[currentReportID]}
                 showsVerticalScrollIndicator={false}
             />
         </View>
@@ -132,33 +79,6 @@ function LHNOptionsList({
 
 LHNOptionsList.displayName = 'LHNOptionsList';
 
-export default withCurrentReportID(
-    withOnyx<LHNOptionsListProps, LHNOptionsListOnyxProps>({
-        reports: {
-            key: ONYXKEYS.COLLECTION.REPORT,
-        },
-        reportActions: {
-            key: ONYXKEYS.COLLECTION.REPORT_ACTIONS,
-        },
-        policy: {
-            key: ONYXKEYS.COLLECTION.POLICY,
-        },
-        preferredLocale: {
-            key: ONYXKEYS.NVP_PREFERRED_LOCALE,
-        },
-        personalDetails: {
-            key: ONYXKEYS.PERSONAL_DETAILS_LIST,
-        },
-        transactions: {
-            key: ONYXKEYS.COLLECTION.TRANSACTION,
-        },
-        draftComments: {
-            key: ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT,
-        },
-        transactionViolations: {
-            key: ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS,
-        },
-    })(memo(LHNOptionsList)),
-);
+export default memo(LHNOptionsList);
 
 export type {LHNOptionsListProps};

src/components/LHNOptionsList/OptionRowLHNData.tsx

@@ -16,61 +16,12 @@ import type {OptionRowLHNDataProps} from './types';
  */
 function OptionRowLHNData({
     isFocused = false,
-    fullReport,
-    reportActions,
-    personalDetails = {},
-    preferredLocale = CONST.LOCALES.DEFAULT,
     comment,
-    policy,
-    receiptTransactions,
-    parentReportAction,
-    transaction,
-    lastReportActionTransaction = {},
-    transactionViolations,
-    canUseViolations,
+    optionItem,
     ...propsToForward
 }: OptionRowLHNDataProps) {
     const reportID = propsToForward.reportID;
 
-    const optionItemRef = useRef<OptionData>();
-
-    const hasViolations = canUseViolations && ReportUtils.doesTransactionThreadHaveViolations(fullReport, transactionViolations, parentReportAction ?? null);
-
-    const optionItem = useMemo(() => {
-        // Note: ideally we'd have this as a dependent selector in onyx!
-        const item = SidebarUtils.getOptionData({
-            report: fullReport,
-            reportActions,
-            personalDetails,
-            preferredLocale: preferredLocale ?? CONST.LOCALES.DEFAULT,
-            policy,
-            parentReportAction,
-            hasViolations: !!hasViolations,
-        });
-        if (deepEqual(item, optionItemRef.current)) {
-            return optionItemRef.current;
-        }
-
-        optionItemRef.current = item;
-
-        return item;
-        // Listen parentReportAction to update title of thread report when parentReportAction changed
-        // Listen to transaction to update title of transaction report when transaction changed
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [
-        fullReport,
-        lastReportActionTransaction,
-        reportActions,
-        personalDetails,
-        preferredLocale,
-        policy,
-        parentReportAction,
-        transaction,
-        transactionViolations,
-        canUseViolations,
-        receiptTransactions,
-    ]);
-
     useEffect(() => {
         if (!optionItem || !!optionItem.hasDraftComment || !comment || comment.length <= 0 || isFocused) {
             return;

src/components/LHNOptionsList/types.ts

@@ -8,16 +8,14 @@ import type CONST from '@src/CONST';
 import type {OptionData} from '@src/libs/ReportUtils';
 import type {Locale, PersonalDetailsList, Policy, Report, ReportAction, ReportActions, Transaction, TransactionViolation} from '@src/types/onyx';
 import type {EmptyObject} from '@src/types/utils/EmptyObject';
+import { OrderedReports } from '@libs/SidebarUtils';
 
 type OptionMode = ValueOf<typeof CONST.OPTION_MODE>;
 
 type LHNOptionsListOnyxProps = {
     /** The policy which the user has access to and which the report could be tied to */
     policy: OnyxCollection<Policy>;
 
-    /** All reports shared with the user */
-    reports: OnyxCollection<Report>;
-
     /** Array of report actions for this report */
     reportActions: OnyxCollection<ReportActions>;
 
@@ -137,6 +135,6 @@ type OptionRowLHNProps = {
     onLayout?: (event: LayoutChangeEvent) => void;
 };
 
-type RenderItemProps = {item: string};
+type RenderItemProps = {item: OrderedReports};
 
 export type {LHNOptionsListProps, OptionRowLHNDataProps, OptionRowLHNProps, LHNOptionsListOnyxProps, RenderItemProps};

src/components/withCurrentReportID.tsx

@@ -39,7 +39,15 @@ function CurrentReportIDContextProvider(props: CurrentReportIDContextProviderPro
      */
     const updateCurrentReportID = useCallback(
         (state: NavigationState) => {
-            setCurrentReportID(Navigation.getTopmostReportId(state) ?? '');
+            const reportID = Navigation.getTopmostReportId(state) ?? '';
+            /**
+             * This is to make sure we don't set the undefined as reportID when
+             * switching between chat list and settings->workspaces tab.
+             * and doing so avoid unnecessary re-render of `useOrderedReportIDs`.
+             */
+            if (reportID) {
+                setCurrentReportID(reportID);
+            }
         },
         [setCurrentReportID],
     );