Merge pull request Expensify#63550 from software-mansion-labs/korytko/optimize-search-context-a-little-more

[CP Staging] Use ref to check if transactions are empty in SearchContext

Author: mountiny

src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx

@@ -162,10 +162,7 @@ function MoneyRequestReportTransactionList({
                 }
                 clearSelectedTransactions(true);
             };
-            // We don't need to run the effect on change of clearSelectedTransactions on every focus.
-            // eslint-disable-next-line react-compiler/react-compiler
-            // eslint-disable-next-line react-hooks/exhaustive-deps
-        }, []),
+        }, [clearSelectedTransactions]),
     );
 
     const handleMouseLeave = (e: React.MouseEvent<Element, MouseEvent>) => {

src/components/Search/SearchContext.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback, useContext, useMemo, useState} from 'react';
+import React, {useCallback, useContext, useMemo, useRef, useState} from 'react';
 import {isMoneyRequestReport} from '@libs/ReportUtils';
 import {isReportListItemType, isTransactionListItemType} from '@libs/SearchUIUtils';
 import CONST from '@src/CONST';
@@ -37,6 +37,7 @@ function SearchContextProvider({children}: ChildrenProps) {
     const [shouldShowFiltersBarLoading, setShouldShowFiltersBarLoading] = useState(false);
     const [lastSearchType, setLastSearchType] = useState<string | undefined>(undefined);
     const [searchContextData, setSearchContextData] = useState(defaultSearchContextData);
+    const areTransactionsEmpty = useRef(true);
 
     const setCurrentSearchHash = useCallback((searchHash: number) => {
         setSearchContextData((prevState) => ({
@@ -45,42 +46,41 @@ function SearchContextProvider({children}: ChildrenProps) {
         }));
     }, []);
 
-    const setSelectedTransactions: SearchContext['setSelectedTransactions'] = useCallback(
-        (selectedTransactions, data = []) => {
-            if (selectedTransactions instanceof Array) {
-                if (!selectedTransactions.length && !searchContextData.selectedTransactionIDs.length) {
-                    return;
-                }
-                return setSearchContextData((prevState) => ({
-                    ...prevState,
-                    selectedTransactionIDs: selectedTransactions,
-                }));
+    const setSelectedTransactions: SearchContext['setSelectedTransactions'] = useCallback((selectedTransactions, data = []) => {
+        if (selectedTransactions instanceof Array) {
+            if (!selectedTransactions.length && areTransactionsEmpty.current) {
+                areTransactionsEmpty.current = true;
+                return;
             }
+            areTransactionsEmpty.current = false;
+            return setSearchContextData((prevState) => ({
+                ...prevState,
+                selectedTransactionIDs: selectedTransactions,
+            }));
+        }
 
-            // When selecting transactions, we also need to manage the reports to which these transactions belong. This is done to ensure proper exporting to CSV.
-            let selectedReports: SearchContext['selectedReports'] = [];
+        // When selecting transactions, we also need to manage the reports to which these transactions belong. This is done to ensure proper exporting to CSV.
+        let selectedReports: SearchContext['selectedReports'] = [];
 
-            if (data.length && data.every(isReportListItemType)) {
-                selectedReports = data
-                    .filter((item) => isMoneyRequestReport(item) && item.transactions.every(({keyForList}) => selectedTransactions[keyForList]?.isSelected))
-                    .map(({reportID, action = CONST.SEARCH.ACTION_TYPES.VIEW, total = CONST.DEFAULT_NUMBER_ID, policyID}) => ({reportID, action, total, policyID}));
-            }
+        if (data.length && data.every(isReportListItemType)) {
+            selectedReports = data
+                .filter((item) => isMoneyRequestReport(item) && item.transactions.every(({keyForList}) => selectedTransactions[keyForList]?.isSelected))
+                .map(({reportID, action = CONST.SEARCH.ACTION_TYPES.VIEW, total = CONST.DEFAULT_NUMBER_ID, policyID}) => ({reportID, action, total, policyID}));
+        }
 
-            if (data.length && data.every(isTransactionListItemType)) {
-                selectedReports = data
-                    .filter(({keyForList}) => !!keyForList && selectedTransactions[keyForList]?.isSelected)
-                    .map(({reportID, action = CONST.SEARCH.ACTION_TYPES.VIEW, amount: total = CONST.DEFAULT_NUMBER_ID, policyID}) => ({reportID, action, total, policyID}));
-            }
+        if (data.length && data.every(isTransactionListItemType)) {
+            selectedReports = data
+                .filter(({keyForList}) => !!keyForList && selectedTransactions[keyForList]?.isSelected)
+                .map(({reportID, action = CONST.SEARCH.ACTION_TYPES.VIEW, amount: total = CONST.DEFAULT_NUMBER_ID, policyID}) => ({reportID, action, total, policyID}));
+        }
 
-            setSearchContextData((prevState) => ({
-                ...prevState,
-                selectedTransactions,
-                shouldTurnOffSelectionMode: false,
-                selectedReports,
-            }));
-        },
-        [searchContextData.selectedTransactionIDs.length],
-    );
+        setSearchContextData((prevState) => ({
+            ...prevState,
+            selectedTransactions,
+            shouldTurnOffSelectionMode: false,
+            selectedReports,
+        }));
+    }, []);
 
     const clearSelectedTransactions: SearchContext['clearSelectedTransactions'] = useCallback(
         (searchHashOrClearIDsFlag, shouldTurnOffSelectionMode = false) => {