Improve performance of Search list

Expensify · Jul 10, 2024 · 9b2396a · 9b2396a
1 parent 97b3831
commit 9b2396a
Showing 1 changed file with 14 additions and 3 deletions.
diff --git a/src/components/Search/index.tsx b/src/components/Search/index.tsx
@@ -1,5 +1,6 @@
 import {useNavigation} from '@react-navigation/native';
 import type {StackNavigationProp} from '@react-navigation/stack';
+import lodashMemoize from 'lodash/memoize';
 import React, {useCallback, useEffect, useRef} from 'react';
 import type {OnyxEntry} from 'react-native-onyx';
 import {useOnyx} from 'react-native-onyx';
@@ -50,6 +51,9 @@ function Search({query, policyIDs, sortBy, sortOrder}: SearchProps) {
     const lastSearchResultsRef = useRef<OnyxEntry<SearchResults>>();
     const {setCurrentSearchHash} = useSearchContext();
 
+    const hash = SearchUtils.getQueryHash(query, policyIDs, sortBy, sortOrder);
+    const [currentSearchResults, searchResultsMeta] = useOnyx(`${ONYXKEYS.COLLECTION.SNAPSHOT}${hash}`);
+
     const getItemHeight = useCallback(
         (item: TransactionListItemType | ReportListItemType) => {
             if (SearchUtils.isTransactionListItemType(item)) {
@@ -70,8 +74,15 @@ function Search({query, policyIDs, sortBy, sortOrder}: SearchProps) {
         [isLargeScreenWidth],
     );
 
-    const hash = SearchUtils.getQueryHash(query, policyIDs, sortBy, sortOrder);
-    const [currentSearchResults, searchResultsMeta] = useOnyx(`${ONYXKEYS.COLLECTION.SNAPSHOT}${hash}`);
+    const getItemHeightMemoized = lodashMemoize(
+        (item: TransactionListItemType | ReportListItemType) => getItemHeight(item),
+        (item) => {
+            // List items are displayed differently on "L"arge and "N"arrow screens so the height will differ
+            // in addition the same items might be displayed as part of different Search screens ("Expenses", "All", "Finished")
+            const screenSizeHash = isLargeScreenWidth ? 'L' : 'N';
+            return `${hash}-${item.keyForList}-${screenSizeHash}`;
+        },
+    );
 
     // save last non-empty search results to avoid ugly flash of loading screen when hash changes and onyx returns empty data
     if (currentSearchResults?.data && currentSearchResults !== lastSearchResultsRef.current) {
@@ -197,7 +208,7 @@ function Search({query, policyIDs, sortBy, sortOrder}: SearchProps) {
             updateCellsBatchingPeriod={200}
             ListItem={ListItem}
             onSelectRow={openReport}
-            getItemHeight={getItemHeight}
+            getItemHeight={getItemHeightMemoized}
             shouldDebounceRowSelect
             shouldPreventDefaultFocusOnSelectRow={!DeviceCapabilities.canUseTouchScreen()}
             listHeaderWrapperStyle={[styles.ph8, styles.pv3, styles.pb5]}