Replace VISIBLE_REPORT_ACTIONS derived value with useOnyxState

src/ONYXKEYS.ts

@@ -1487,7 +1487,6 @@ const ONYXKEYS = {
     DERIVED: {
         REPORT_TRANSACTIONS_AND_VIOLATIONS: 'reportTransactionsAndViolations',
         OUTSTANDING_REPORTS_BY_POLICY_ID: 'outstandingReportsByPolicyID',
-        VISIBLE_REPORT_ACTIONS: 'visibleReportActions',
         NON_PERSONAL_AND_WORKSPACE_CARD_LIST: 'nonPersonalAndWorkspaceCardList',
         PERSONAL_AND_WORKSPACE_CARD_LIST: 'personalAndWorkspaceCardList',
         CARD_FEED_ERRORS: 'cardFeedErrors',
@@ -2090,7 +2089,6 @@ type OnyxValuesMapping = {
 type OnyxDerivedValuesMapping = {
     [ONYXKEYS.DERIVED.REPORT_TRANSACTIONS_AND_VIOLATIONS]: OnyxTypes.ReportTransactionsAndViolationsDerivedValue;
     [ONYXKEYS.DERIVED.OUTSTANDING_REPORTS_BY_POLICY_ID]: OnyxTypes.OutstandingReportsByPolicyIDDerivedValue;
-    [ONYXKEYS.DERIVED.VISIBLE_REPORT_ACTIONS]: OnyxTypes.VisibleReportActionsDerivedValue;
     [ONYXKEYS.DERIVED.NON_PERSONAL_AND_WORKSPACE_CARD_LIST]: OnyxTypes.NonPersonalAndWorkspaceCardListDerivedValue;
     [ONYXKEYS.DERIVED.PERSONAL_AND_WORKSPACE_CARD_LIST]: OnyxTypes.PersonalAndWorkspaceCardListDerivedValue;
     [ONYXKEYS.DERIVED.CARD_FEED_ERRORS]: OnyxTypes.CardFeedErrorsDerivedValue;

src/components/Attachments/AttachmentCarousel/extractAttachments.ts

@@ -6,7 +6,7 @@ import {canUserPerformWriteAction} from '@libs/ReportUtils';
 import tryResolveUrlFromApiRoot from '@libs/tryResolveUrlFromApiRoot';
 
 import CONST from '@src/CONST';
-import type {Report, ReportAction, ReportActions, VisibleReportActionsDerivedValue} from '@src/types/onyx';
+import type {Report, ReportAction, ReportActions, VisibleReportActions} from '@src/types/onyx';
 import type {Note} from '@src/types/onyx/Report';
 
 import type {OnyxEntry} from 'react-native-onyx';
@@ -34,7 +34,7 @@ function extractAttachments(
         reportActions?: OnyxEntry<ReportActions>;
         report: OnyxEntry<Report>;
         isReportArchived: boolean | undefined;
-        visibleReportActionsData?: VisibleReportActionsDerivedValue;
+        visibleReportActionsData?: VisibleReportActions;
     },
 ) {
     const targetNote = privateNotes?.[Number(accountID)]?.note ?? '';

src/components/LHNOptionsList/OptionRowLHN/OptionRowLHNData.tsx

@@ -10,6 +10,7 @@ import useOnyx from '@hooks/useOnyx';
 import usePersonalDetailByLogin from '@hooks/usePersonalDetailByLogin';
 import {usePersonalDetailsByIDs} from '@hooks/usePersonalDetails';
 import {useReportAttributesEntry, useReportNameEntries} from '@hooks/useReportAttributes';
+import useVisibleReportActions from '@hooks/useVisibleReportActions';
 
 import getNonEmptyStringOnyxID from '@libs/getNonEmptyStringOnyxID';
 import {
@@ -31,7 +32,6 @@ import CONST from '@src/CONST';
 import {getMovedReportID} from '@src/libs/ModifiedExpenseMessage';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {PersonalDetailsList, Report, ReportAction, ReportActions as ReportActionsType} from '@src/types/onyx';
-import type {VisibleReportActionsDerivedValue} from '@src/types/onyx/DerivedValues';
 
 import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
 
@@ -137,27 +137,10 @@ function OptionRowLHNData({isOptionFocused = false, viewMode = 'default', report
 
     const isInvoice = fullReport?.type === CONST.REPORT.TYPE.INVOICE;
     const isIOUReport = fullReport?.type === CONST.REPORT.TYPE.IOU;
-    const visibleActionsSelector = (data: VisibleReportActionsDerivedValue | undefined) => {
-        if (!data) {
-            return undefined;
-        }
-        const result: VisibleReportActionsDerivedValue = {};
-        const reportEntry = data[reportID];
-        if (reportEntry) {
-            result[reportID] = reportEntry;
-        }
-        if (reportAttributes?.oneTransactionThreadReportID) {
-            const txThreadEntry = data[reportAttributes.oneTransactionThreadReportID];
-            if (txThreadEntry) {
-                result[reportAttributes.oneTransactionThreadReportID] = txThreadEntry;
-            }
-        }
-        return result;
-    };
 
     const [oneTransactionThreadReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${getNonEmptyStringOnyxID(reportAttributes?.oneTransactionThreadReportID)}`);
     const [transactionThreadReportActions] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${getNonEmptyStringOnyxID(reportAttributes?.oneTransactionThreadReportID)}`);
-    const [visibleReportActionsData] = useOnyx(ONYXKEYS.DERIVED.VISIBLE_REPORT_ACTIONS, {selector: visibleActionsSelector});
+    const visibleReportActionsData = useVisibleReportActions(reportID, reportAttributes?.oneTransactionThreadReportID);
     const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${getNonEmptyStringOnyxID(fullReport?.policyID)}`);
     const [policyTags] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_TAGS}${fullReport?.policyID}`);
     const reimburserAccountID = usePersonalDetailByLogin(policy?.reimburser ?? policy?.achAccount?.reimburser, accountIDSelector);

src/components/MoneyRequestReportView/useMoneyRequestReportVisibleActions.ts

@@ -8,17 +8,14 @@
  * non-inverted unified list, newest-first for the shared unread/mark-as-read hooks - so callers never
  * re-derive or re-sort them.
  */
-import useOnyx from '@hooks/useOnyx';
+import useVisibleReportActions from '@hooks/useVisibleReportActions';
 
 import {isActionVisibleOnMoneyRequestReport} from '@libs/MoneyRequestReportUtils';
 import {getFirstVisibleReportActionID, isDeletedParentAction, isIOUActionMatchingTransactionList, isReportActionVisible, shouldHidePayAction} from '@libs/ReportActionsUtils';
 
 import CONST from '@src/CONST';
-import ONYXKEYS from '@src/ONYXKEYS';
 import type * as OnyxTypes from '@src/types/onyx';
 
-import {reportVisibleActionsSelector} from '@selectors/ReportAction';
-
 type UseMoneyRequestReportVisibleActionsParams = {
     /** The report whose actions are being displayed */
     reportID: string | undefined;
@@ -70,7 +67,7 @@ function useMoneyRequestReportVisibleActions({
     isOffline,
     isWaitingOnBankAccount = false,
 }: UseMoneyRequestReportVisibleActionsParams): UseMoneyRequestReportVisibleActionsResult {
-    const [visibleReportActionsData] = useOnyx(ONYXKEYS.DERIVED.VISIBLE_REPORT_ACTIONS, {selector: reportVisibleActionsSelector(reportID)});
+    const visibleReportActionsData = useVisibleReportActions(reportID);
 
     const reportActionsWithVisiblePayments = isWaitingOnBankAccount ? reportActions.filter((action) => !shouldHidePayAction(action, true)) : reportActions;
     const visibleReportActionsNewestFirst = reportActionsWithVisiblePayments.filter((reportAction) => {

src/components/ParentNavigationSubtitle.tsx

@@ -7,6 +7,7 @@ import useRootNavigationState from '@hooks/useRootNavigationState';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
+import useVisibleReportActions from '@hooks/useVisibleReportActions';
 
 import {isFullScreenName} from '@libs/Navigation/helpers/isNavigatorName';
 import Navigation from '@libs/Navigation/Navigation';
@@ -25,7 +26,6 @@ import type {ColorValue, StyleProp, TextStyle, ViewStyle} from 'react-native';
 
 import {useRoute} from '@react-navigation/native';
 import {getReportHasParentAccess} from '@selectors/Report';
-import {reportVisibleActionsSelector} from '@selectors/ReportAction';
 import React from 'react';
 import {View} from 'react-native';
 
@@ -102,7 +102,7 @@ function ParentNavigationSubtitle({
     const {translate} = useLocalize();
     const [hasParentAccess] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`, {selector: getReportHasParentAccess});
     const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${parentReportID}`);
-    const [visibleReportActionsData] = useOnyx(ONYXKEYS.DERIVED.VISIBLE_REPORT_ACTIONS, {selector: reportVisibleActionsSelector(parentReportID)});
+    const visibleReportActionsData = useVisibleReportActions(parentReportID);
     const isReportArchived = useReportIsArchived(report?.reportID);
     const canUserPerformWriteAction = canUserPerformWriteActionReportUtils(report, isReportArchived);
     const hasAccessToParentReport = hasParentAccess !== false;

src/components/Search/SearchAutocompleteList.tsx

@@ -7,6 +7,7 @@ import type {ListItem as NewListItem, ListItemProps} from '@components/Selection
 import SelectionListWithSections from '@components/SelectionList/SelectionListWithSections';
 import type {Section, SelectionListWithSectionsHandle} from '@components/SelectionList/SelectionListWithSections/types';
 
+import useAllVisibleReportActions from '@hooks/useAllVisibleReportActions';
 import useAutocompleteSuggestions from '@hooks/useAutocompleteSuggestions';
 import useBottomSafeSafeAreaPaddingStyle from '@hooks/useBottomSafeSafeAreaPaddingStyle';
 import {useCurrencyListActions} from '@hooks/useCurrencyList';
@@ -216,7 +217,7 @@ function SearchAutocompleteList({
     });
     const [policies = getEmptyObject<NonNullable<OnyxCollection<Policy>>>()] = useOnyx(ONYXKEYS.COLLECTION.POLICY);
     const [allPolicyTags] = useOnyx(ONYXKEYS.COLLECTION.POLICY_TAGS);
-    const [visibleReportActionsData] = useOnyx(ONYXKEYS.DERIVED.VISIBLE_REPORT_ACTIONS);
+    const visibleReportActionsData = useAllVisibleReportActions();
     const {activePolicyID} = useActivePolicyContext();
     const sortedReportActionsData = useSortedReportActionsData();
     const sortedActions = sortedReportActionsData?.sortedActions;

src/components/Search/SearchRouter/SearchRouterOptionsWarmer.tsx

@@ -1,3 +1,4 @@
+import useAllVisibleReportActions from '@hooks/useAllVisibleReportActions';
 import useFilteredOptions from '@hooks/useFilteredOptions';
 import useOnyx from '@hooks/useOnyx';
 import {useAllPersonalDetails} from '@hooks/usePersonalDetails';
@@ -38,7 +39,7 @@ function SearchRouterOptionsWarmer({onDone}: SearchRouterOptionsWarmerProps) {
     const reportAttributes = useAllReportAttributes();
     const sortedReportActionsData = useSortedReportActionsData();
     const [allPolicyTags] = useOnyx(ONYXKEYS.COLLECTION.POLICY_TAGS);
-    const [visibleReportActionsData] = useOnyx(ONYXKEYS.DERIVED.VISIBLE_REPORT_ACTIONS);
+    const visibleReportActionsData = useAllVisibleReportActions();
 
     const churnVersionRef = useRef(0);
     useEffect(() => {

src/hooks/useAllVisibleReportActions.ts

@@ -0,0 +1,23 @@
+import ONYXKEYS from '@src/ONYXKEYS';
+import type {VisibleReportActions} from '@src/types/onyx';
+
+import {getAllVisibleReportActions} from '@selectors/VisibleReportActions';
+import {useOnyxState} from 'react-native-onyx';
+
+const dependencies = [ONYXKEYS.COLLECTION.REPORT_ACTIONS, ONYXKEYS.COLLECTION.REPORT, ONYXKEYS.COLLECTION.REPORT_NAME_VALUE_PAIRS, ONYXKEYS.SESSION] as const;
+
+/** The cached visibility of every report's actions, keyed by reportID. Reads live data, also inside the Search scope. */
+function useAllVisibleReportActions(): VisibleReportActions {
+    return useOnyxState(
+        (state) =>
+            getAllVisibleReportActions(
+                state[ONYXKEYS.COLLECTION.REPORT_ACTIONS],
+                state[ONYXKEYS.COLLECTION.REPORT],
+                state[ONYXKEYS.COLLECTION.REPORT_NAME_VALUE_PAIRS],
+                state[ONYXKEYS.SESSION]?.accountID,
+            ),
+        {dependencies},
+    );
+}
+
+export default useAllVisibleReportActions;

src/hooks/useAutocompleteSuggestions.ts

@@ -24,8 +24,8 @@ import {getDatePresets, getHasOptions} from '@libs/SearchUIUtils';
 
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type {CardFeeds, CardList, PersonalDetailsList, Policy} from '@src/types/onyx';
-import type {ReportAttributesDerivedValue, VisibleReportActionsDerivedValue} from '@src/types/onyx/DerivedValues';
+import type {CardFeeds, CardList, PersonalDetailsList, Policy, VisibleReportActions} from '@src/types/onyx';
+import type {ReportAttributesDerivedValue} from '@src/types/onyx/DerivedValues';
 import type {Icon} from '@src/types/onyx/OnyxCommon';
 import type {SearchDataTypes} from '@src/types/onyx/SearchResults';
 import getEmptyArray from '@src/types/utils/getEmptyArray';
@@ -64,7 +64,7 @@ type UseAutocompleteSuggestionsParams = {
     countryCode: OnyxEntry<number>;
     loginList: OnyxEntry<Record<string, unknown>>;
     policies: NonNullable<OnyxCollection<Policy>>;
-    visibleReportActionsData?: VisibleReportActionsDerivedValue;
+    visibleReportActionsData?: VisibleReportActions;
     reportAttributesDerived?: ReportAttributesDerivedValue['reports'];
     currentUserAccountID: number;
     currentUserEmail: string;

src/hooks/useReportActionsVisibility.ts

@@ -6,8 +6,6 @@ import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {ReportAction} from '@src/types/onyx';
 
-import {reportVisibleActionsSelector} from '@selectors/ReportAction';
-
 import useConciergeSidePanelReportActions from './useConciergeSidePanelReportActions';
 import useCurrentUserPersonalDetails from './useCurrentUserPersonalDetails';
 import useIsInSidePanel from './useIsInSidePanel';
@@ -16,6 +14,7 @@ import useNetwork from './useNetwork';
 import useOnyx from './useOnyx';
 import useSidePanelState from './useSidePanelState';
 import useTransactionsAndViolationsForReport from './useTransactionsAndViolationsForReport';
+import useVisibleReportActions from './useVisibleReportActions';
 
 type UseReportActionsVisibilityParams = {
     reportID: string | undefined;
@@ -53,9 +52,7 @@ function useReportActionsVisibility({
 
     const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`);
     const [conciergeReportID] = useOnyx(ONYXKEYS.CONCIERGE_REPORT_ID);
-    const [visibleReportActionsData] = useOnyx(ONYXKEYS.DERIVED.VISIBLE_REPORT_ACTIONS, {
-        selector: reportVisibleActionsSelector(reportID),
-    });
+    const visibleReportActionsData = useVisibleReportActions(reportID);
 
     const isInSidePanel = useIsInSidePanel();
     const isConciergeSidePanel = isInSidePanel && isConciergeChatReport(report, conciergeReportID);

src/hooks/useSearchSelector/base.ts

@@ -1,5 +1,6 @@
 import {usePersonalDetails} from '@components/OnyxListItemProvider';
 
+import useAllVisibleReportActions from '@hooks/useAllVisibleReportActions';
 import {useCurrencyListActions} from '@hooks/useCurrencyList';
 import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
 import useDebounce from '@hooks/useDebounce';
@@ -202,7 +203,7 @@ function useSearchSelectorBase({
     const [loginList] = useOnyx(ONYXKEYS.LOGINS, {selector: expensifyLoginsSelector});
     const [allPolicies] = useOnyx(ONYXKEYS.COLLECTION.POLICY);
     const [draftComments] = useOnyx(ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT);
-    const [visibleReportActionsData] = useOnyx(ONYXKEYS.DERIVED.VISIBLE_REPORT_ACTIONS);
+    const visibleReportActionsData = useAllVisibleReportActions();
     const sortedReportActionsData = useSortedReportActionsData();
     const sortedActions = sortedReportActionsData?.sortedActions;
     const transactionThreadIDs = sortedReportActionsData?.transactionThreadIDs;

src/hooks/useVisibleReportActions.ts

@@ -0,0 +1,38 @@
+import ONYXKEYS from '@src/ONYXKEYS';
+import type {VisibleReportActions} from '@src/types/onyx';
+
+import {getVisibleReportActionsForReports} from '@selectors/VisibleReportActions';
+import {useOnyxState} from 'react-native-onyx';
+
+/**
+ * The cached visibility of one report's actions, plus its transaction thread's when given, in the `{[reportID]: visibility}`
+ * shape `isReportActionVisible` expects. It depends only on those reports' actions, ticket state and the user, so writes to other reports don't re-run it.
+ */
+function useVisibleReportActions(reportID: string | undefined, transactionThreadReportID?: string): VisibleReportActions | undefined {
+    const reportIDs = [reportID, transactionThreadReportID].filter((id): id is string => !!id);
+
+    return useOnyxState(
+        (state) =>
+            getVisibleReportActionsForReports(
+                reportIDs.map((id) => ({
+                    reportID: id,
+                    reportActions: state[`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${id}`],
+                    report: state[`${ONYXKEYS.COLLECTION.REPORT}${id}`],
+                    reportNameValuePairs: state[`${ONYXKEYS.COLLECTION.REPORT_NAME_VALUE_PAIRS}${id}`],
+                })),
+                state[ONYXKEYS.SESSION]?.accountID,
+            ),
+        {
+            dependencies: [
+                ...reportIDs.flatMap((id) => [
+                    `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${id}` as const,
+                    `${ONYXKEYS.COLLECTION.REPORT}${id}` as const,
+                    `${ONYXKEYS.COLLECTION.REPORT_NAME_VALUE_PAIRS}${id}` as const,
+                ]),
+                ONYXKEYS.SESSION,
+            ],
+        },
+    );
+}
+
+export default useVisibleReportActions;