[Split #94595] Batch F - Remove useOnyx deps from Report/Inbox chat

src/components/ChronosTimerHeaderButton.tsx

@@ -47,16 +47,12 @@ function ChronosTimerHeaderButton({report}: ChronosTimerHeaderButtonProps) {
 
     const {accountID: currentUserAccountID, timezone: timezoneParam} = useCurrentUserPersonalDetails();
     const reportActionsOnyxKey = `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report.reportID}` as OnyxKey;
-    const [timerStartTime] = useOnyx<OnyxKey, string | null>(
-        reportActionsOnyxKey,
-        {
-            selector: (reportActions: unknown): string | null => {
-                const sorted = getSortedReportActionsForDisplay(reportActions as OnyxEntry<ReportActions>, canPerformWriteAction, false, visibleReportActionsData, report.reportID);
-                return getTimeOfChronosTimerRunningFromVisibleActions(sorted, currentUserAccountID);
-            },
+    const [timerStartTime] = useOnyx<OnyxKey, string | null>(reportActionsOnyxKey, {
+        selector: (reportActions: unknown): string | null => {
+            const sorted = getSortedReportActionsForDisplay(reportActions as OnyxEntry<ReportActions>, canPerformWriteAction, false, visibleReportActionsData, report.reportID);
+            return getTimeOfChronosTimerRunningFromVisibleActions(sorted, currentUserAccountID);
         },
-        [canPerformWriteAction, visibleReportActionsData, report.reportID, currentUserAccountID],
-    );
+    });
 
     const [isLoadingInitialReportActions] = useOnyx(`${ONYXKEYS.COLLECTION.RAM_ONLY_REPORT_LOADING_STATE}${report.reportID}`, {
         selector: isLoadingInitialReportActionsSelector,

src/components/Reactions/ReactionTooltipContent.tsx

@@ -50,13 +50,9 @@ function userNamesStringSelector(accountIDs: number[], currentUserAccountID: num
 function ReactionTooltipContent({accountIDs, emojiCodes, emojiName, currentUserAccountID}: ReactionTooltipContentProps) {
     const styles = useThemeStyles();
     const {translate, preferredLocale} = useLocalize();
-    const [namesString] = useOnyx(
-        ONYXKEYS.PERSONAL_DETAILS_LIST,
-        {
-            selector: userNamesStringSelector(accountIDs, currentUserAccountID, translate),
-        },
-        [accountIDs, currentUserAccountID, translate],
-    );
+    const [namesString] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {
+        selector: (personalDetails: OnyxEntry<PersonalDetailsList>) => userNamesStringSelector(accountIDs, currentUserAccountID, translate)(personalDetails),
+    });
     const localizedEmojiName = getLocalizedEmojiName(emojiName, preferredLocale);
 
     return (

src/pages/inbox/report/ReactionList/PopoverReactionList.tsx

@@ -9,10 +9,11 @@ import type {ReactionListAnchor} from '@pages/inbox/ReportScreenContext';
 
 import ONYXKEYS from '@src/ONYXKEYS';
 import {multiPersonalDetailsSelector} from '@src/selectors/PersonalDetails';
-import type {PersonalDetails} from '@src/types/onyx';
+import type {PersonalDetails, PersonalDetailsList} from '@src/types/onyx';
 import getEmptyArray from '@src/types/utils/getEmptyArray';
 
 import type {RefObject} from 'react';
+import type {OnyxEntry} from 'react-native-onyx';
 
 import React, {useEffect} from 'react';
 
@@ -39,13 +40,9 @@ function PopoverReactionList({isVisible, emojiName, reportActionID, anchorPositi
     const isReady = !!selectedReaction;
     const {emojiCodes = [], reactionCount = 0, hasUserReacted = false, userAccountIDs = []} = selectedReaction ? getEmojiReactionDetails(emojiName, selectedReaction, accountID) : {};
 
-    const [users = getEmptyArray<PersonalDetails>()] = useOnyx(
-        ONYXKEYS.PERSONAL_DETAILS_LIST,
-        {
-            selector: multiPersonalDetailsSelector(isReady ? userAccountIDs : []),
-        },
-        [isReady, userAccountIDs],
-    );
+    const [users = getEmptyArray<PersonalDetails>()] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {
+        selector: (personalDetailsList: OnyxEntry<PersonalDetailsList>) => multiPersonalDetailsSelector(isReady ? userAccountIDs : getEmptyArray<number>())(personalDetailsList),
+    });
 
     // Hide the list when all reactions are removed
     useEffect(() => {

src/pages/inbox/report/ReportActionCompose/SuggestionMention.tsx

@@ -100,7 +100,7 @@ function SuggestionMention({
     );
 
     const [conciergeReportID = ''] = useOnyx(ONYXKEYS.CONCIERGE_REPORT_ID);
-    const [mentionableReports] = useOnyx(ONYXKEYS.COLLECTION.REPORT, {selector: mentionableReportsSelector}, [policyID]);
+    const [mentionableReports] = useOnyx(ONYXKEYS.COLLECTION.REPORT, {selector: mentionableReportsSelector});
 
     const currentUserPersonalDetails = useCurrentUserPersonalDetails();
     const isMentionSuggestionsMenuVisible = !!suggestionValues.suggestedMentions.length && suggestionValues.shouldShowSuggestionMenu;

src/pages/inbox/report/ReportActionItem.tsx

@@ -204,10 +204,10 @@ function ReportActionItem({
     const shouldDisplayContextMenuValue = shouldDisplayContextMenu && !isConciergeGreeting;
     const {transitionActionSheetState} = ActionSheetAwareScrollView.useActionSheetAwareScrollViewActions();
     const {translate, datetimeToCalendarTime} = useLocalize();
-    const [actorDisplayName] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {selector: personalDetailsDisplayNameSelector(action.actorAccountID ?? CONST.DEFAULT_NUMBER_ID, translate)}, [
-        action.actorAccountID,
-        translate,
-    ]);
+    const actorAccountID = action.actorAccountID ?? CONST.DEFAULT_NUMBER_ID;
+    const [actorDisplayName] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {
+        selector: (personalDetailsList: OnyxEntry<OnyxTypes.PersonalDetailsList>) => personalDetailsDisplayNameSelector(actorAccountID, translate)(personalDetailsList),
+    });
     const {showConfirmModal} = useConfirmModal();
     const {shouldUseNarrowLayout} = useResponsiveLayout();
     const theme = useTheme();

src/pages/inbox/report/ReportActionItemCreated.tsx

@@ -19,7 +19,7 @@ import ONYXKEYS from '@src/ONYXKEYS';
 
 import {hasSeenTourSelector} from '@selectors/Onboarding';
 import {conciergePersonalDetailSelector, isOptimisticPersonalDetailSelector, personalDetailsSelector} from '@selectors/PersonalDetails';
-import React, {memo, useMemo} from 'react';
+import React, {memo} from 'react';
 import {View} from 'react-native';
 
 import AnimatedEmptyStateBackground from './AnimatedEmptyStateBackground';
@@ -46,8 +46,7 @@ function ReportActionItemCreated({reportID, policyID}: ReportActionItemCreatedPr
     const currentUserPersonalDetail = useCurrentUserPersonalDetails();
     const {accountID: currentUserAccountID} = currentUserPersonalDetail;
     const [conciergePersonalDetail] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {selector: conciergePersonalDetailSelector});
-    const reportOwnerSelector = useMemo(() => personalDetailsSelector(report?.ownerAccountID), [report?.ownerAccountID]);
-    const [reportOwnerPersonalDetail] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {selector: reportOwnerSelector}, [reportOwnerSelector]);
+    const [reportOwnerPersonalDetail] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {selector: personalDetailsSelector(report?.ownerAccountID)});
 
     const otherParticipantAccountID =
         Object.keys(report?.participants ?? {})

src/pages/inbox/report/ReportActionItemParentAction.tsx

@@ -19,7 +19,7 @@ import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
 
 import {hasSeenTourSelector} from '@selectors/Onboarding';
 import {conciergePersonalDetailSelector, personalDetailsSelector} from '@selectors/PersonalDetails';
-import React, {useCallback} from 'react';
+import React from 'react';
 import {View} from 'react-native';
 
 import AncestorReportActionItem from './AncestorReportActionItem';
@@ -77,14 +77,14 @@ function ReportActionItemParentAction({
     const [conciergePersonalDetail] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {selector: conciergePersonalDetailSelector});
     const [reportOwnerPersonalDetail] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {selector: personalDetailsSelector(report?.ownerAccountID)});
 
-    const getLinkedTransactionRouteError = useCallback((transaction: OnyxEntry<Transaction>) => {
-        return transaction?.errorFields?.route;
-    }, []);
-
-    const [linkedTransactionRouteError] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`, {selector: getLinkedTransactionRouteError});
+    const [linkedTransactionRouteError] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`, {
+        selector: (transaction: OnyxEntry<Transaction>) => {
+            return transaction?.errorFields?.route;
+        },
+    });
 
-    const ancestorReportNameValuePairsSelector = useCallback(
-        (allReportNameValuePairs: OnyxCollection<ReportNameValuePairs>) => {
+    const [ancestorsReportNameValuePairs] = useOnyx(ONYXKEYS.COLLECTION.REPORT_NAME_VALUE_PAIRS, {
+        selector: (allReportNameValuePairs: OnyxCollection<ReportNameValuePairs>) => {
             if (!allReportNameValuePairs) {
                 return {};
             }
@@ -95,16 +95,7 @@ function ReportActionItemParentAction({
             }
             return ancestorReportNameValuePairs;
         },
-        [ancestors],
-    );
-
-    const [ancestorsReportNameValuePairs] = useOnyx(
-        ONYXKEYS.COLLECTION.REPORT_NAME_VALUE_PAIRS,
-        {
-            selector: ancestorReportNameValuePairsSelector,
-        },
-        [ancestors],
-    );
+    });
 
     const [conciergeReportID] = useOnyx(ONYXKEYS.CONCIERGE_REPORT_ID);
     const [introSelected] = useOnyx(ONYXKEYS.NVP_INTRO_SELECTED);

src/pages/inbox/report/actionContents/ChatActionableButtons.tsx

@@ -63,7 +63,7 @@ function ChatActionableButtons({action, originalReportID, reportID, hasPendingFo
     const [userBillingGracePeriodEnds] = useOnyx(ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_USER_BILLING_GRACE_PERIOD_END);
     const [amountOwed] = useOnyx(ONYXKEYS.NVP_PRIVATE_AMOUNT_OWED);
     const [ownerBillingGracePeriodEnd] = useOnyx(ONYXKEYS.NVP_PRIVATE_OWNER_BILLING_GRACE_PERIOD_END);
-    const [filteredPoliciesInfo] = useOnyx(ONYXKEYS.COLLECTION.POLICY, {selector: createFilteredPoliciesInfoSelector(personalDetail.email)}, [personalDetail.email]);
+    const [filteredPoliciesInfo] = useOnyx(ONYXKEYS.COLLECTION.POLICY, {selector: createFilteredPoliciesInfoSelector(personalDetail.email)});
     const filteredPoliciesCount = filteredPoliciesInfo?.filteredPoliciesCount ?? 0;
     const firstPolicyID = filteredPoliciesInfo?.firstPolicyID;
     const trackExpenseTransactionID = isActionableTrackExpense(action) ? getOriginalMessage(action)?.transactionID : undefined;

src/pages/inbox/report/actionContents/ReimbursementQueuedContent.tsx

@@ -18,7 +18,7 @@ import {openPersonalBankAccountSetupView} from '@userActions/BankAccounts';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
-import type {Report, ReportAction} from '@src/types/onyx';
+import type {PersonalDetailsList, Report, ReportAction} from '@src/types/onyx';
 
 import type {OnyxEntry} from 'react-native-onyx';
 
@@ -49,10 +49,10 @@ function ReimbursementQueuedContent({action, report, iouReport}: ReimbursementQu
     const [isUserValidated] = useOnyx(ONYXKEYS.ACCOUNT, {selector: isUserValidatedSelector});
 
     const targetReport = isChatThread(report) ? parentReport : report;
-    const [ownerDisplayName] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {selector: personalDetailsDisplayNameSelector(targetReport?.ownerAccountID ?? CONST.DEFAULT_NUMBER_ID, translate)}, [
-        targetReport?.ownerAccountID,
-        translate,
-    ]);
+    const ownerAccountID = targetReport?.ownerAccountID ?? CONST.DEFAULT_NUMBER_ID;
+    const [ownerDisplayName] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {
+        selector: (personalDetailsList: OnyxEntry<PersonalDetailsList>) => personalDetailsDisplayNameSelector(ownerAccountID, translate)(personalDetailsList),
+    });
     const submitterDisplayName = formatPhoneNumber(ownerDisplayName ?? '');
     const paymentType = getOriginalMessage(action)?.paymentType ?? '';
     const missingPaymentMethod = getIndicatedMissingPaymentMethod(userWalletTierName, targetReport?.reportID, action, bankAccountList);

src/pages/inbox/report/useActiveDraftReportAction.ts

@@ -143,72 +143,64 @@ function useActiveDraftReportAction({reportID, effectiveTransactionThreadReportI
             ? undefined
             : effectiveTransactionThreadReportID;
 
-    const [reportActions] = useOnyx(
-        ONYXKEYS.COLLECTION.REPORT_ACTIONS,
-        {
-            selector: (allReportActions) => {
-                if (!allReportActions) {
-                    return {};
-                }
-
-                const scopedReportActionsSlice: OnyxCollection<OnyxTypes.ReportActions> = {};
-
-                if (reportID) {
-                    const visibleReportActionsKey = `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`;
-                    scopedReportActionsSlice[visibleReportActionsKey] = allReportActions[visibleReportActionsKey];
-                }
-
-                if (transactionThreadReportID != null) {
-                    const transactionThreadActionsKey = `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${transactionThreadReportID}`;
-                    scopedReportActionsSlice[transactionThreadActionsKey] = allReportActions[transactionThreadActionsKey];
-                }
-
-                for (const ancestor of ancestors) {
-                    const ancestorReportActionsKey = `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${ancestor.report.reportID}`;
-                    scopedReportActionsSlice[ancestorReportActionsKey] = allReportActions[ancestorReportActionsKey];
-                }
-
-                return scopedReportActionsSlice;
-            },
+    const [reportActions] = useOnyx(ONYXKEYS.COLLECTION.REPORT_ACTIONS, {
+        selector: (allReportActions: OnyxCollection<OnyxTypes.ReportActions>) => {
+            if (!allReportActions) {
+                return {};
+            }
+
+            const scopedReportActionsSlice: OnyxCollection<OnyxTypes.ReportActions> = {};
+
+            if (reportID) {
+                const visibleReportActionsKey = `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`;
+                scopedReportActionsSlice[visibleReportActionsKey] = allReportActions[visibleReportActionsKey];
+            }
+
+            if (transactionThreadReportID != null) {
+                const transactionThreadActionsKey = `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${transactionThreadReportID}`;
+                scopedReportActionsSlice[transactionThreadActionsKey] = allReportActions[transactionThreadActionsKey];
+            }
+
+            for (const ancestor of ancestors) {
+                const ancestorReportActionsKey = `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${ancestor.report.reportID}`;
+                scopedReportActionsSlice[ancestorReportActionsKey] = allReportActions[ancestorReportActionsKey];
+            }
+
+            return scopedReportActionsSlice;
         },
-        [ancestors, reportID, transactionThreadReportID],
-    );
-
-    const [reportActionsDrafts] = useOnyx(
-        ONYXKEYS.COLLECTION.REPORT_ACTIONS_DRAFTS,
-        {
-            selector: (allDrafts) => {
-                if (!allDrafts) {
-                    return {};
-                }
-
-                const scopedDraftsSlice: OnyxCollection<OnyxTypes.ReportActionsDrafts> = {};
-
-                if (reportID) {
-                    const currentDraftKey = `${ONYXKEYS.COLLECTION.REPORT_ACTIONS_DRAFTS}${reportID}`;
-                    scopedDraftsSlice[currentDraftKey] = allDrafts[currentDraftKey];
-                }
-
-                if (transactionThreadReportID != null) {
-                    const transactionThreadDraftKey = `${ONYXKEYS.COLLECTION.REPORT_ACTIONS_DRAFTS}${transactionThreadReportID}`;
-                    scopedDraftsSlice[transactionThreadDraftKey] = allDrafts[transactionThreadDraftKey];
-                }
+    });
 
-                for (const ancestor of ancestors) {
-                    const actionsForAncestorRow = reportActions?.[`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${ancestor.report.reportID}`];
-                    const draftOwningReportID = getOriginalReportID(ancestor.report.reportID, ancestor.reportAction, actionsForAncestorRow);
-                    if (!draftOwningReportID) {
-                        continue;
-                    }
-                    const ancestorDraftBucketKey = `${ONYXKEYS.COLLECTION.REPORT_ACTIONS_DRAFTS}${draftOwningReportID}`;
-                    scopedDraftsSlice[ancestorDraftBucketKey] = allDrafts[ancestorDraftBucketKey];
+    const [reportActionsDrafts] = useOnyx(ONYXKEYS.COLLECTION.REPORT_ACTIONS_DRAFTS, {
+        selector: (allDrafts: OnyxCollection<OnyxTypes.ReportActionsDrafts>) => {
+            if (!allDrafts) {
+                return {};
+            }
+
+            const scopedDraftsSlice: OnyxCollection<OnyxTypes.ReportActionsDrafts> = {};
+
+            if (reportID) {
+                const currentDraftKey = `${ONYXKEYS.COLLECTION.REPORT_ACTIONS_DRAFTS}${reportID}`;
+                scopedDraftsSlice[currentDraftKey] = allDrafts[currentDraftKey];
+            }
+
+            if (transactionThreadReportID != null) {
+                const transactionThreadDraftKey = `${ONYXKEYS.COLLECTION.REPORT_ACTIONS_DRAFTS}${transactionThreadReportID}`;
+                scopedDraftsSlice[transactionThreadDraftKey] = allDrafts[transactionThreadDraftKey];
+            }
+
+            for (const ancestor of ancestors) {
+                const actionsForAncestorRow = reportActions?.[`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${ancestor.report.reportID}`];
+                const draftOwningReportID = getOriginalReportID(ancestor.report.reportID, ancestor.reportAction, actionsForAncestorRow);
+                if (!draftOwningReportID) {
+                    continue;
                 }
+                const ancestorDraftBucketKey = `${ONYXKEYS.COLLECTION.REPORT_ACTIONS_DRAFTS}${draftOwningReportID}`;
+                scopedDraftsSlice[ancestorDraftBucketKey] = allDrafts[ancestorDraftBucketKey];
+            }
 
-                return scopedDraftsSlice;
-            },
+            return scopedDraftsSlice;
         },
-        [ancestors, reportActions, reportID, transactionThreadReportID],
-    );
+    });
 
     return computeResolvedActiveDraftEdit({ancestors, reportActions, reportActionsDrafts, reportID, transactionThreadReportID});
 }

src/pages/settings/Report/ReportDetailsColumnsPage.tsx

@@ -23,7 +23,7 @@ import arraysEqual from '@src/utils/arraysEqual';
 import type {OnyxCollection} from 'react-native-onyx';
 
 import {useRoute} from '@react-navigation/native';
-import React, {useCallback, useMemo} from 'react';
+import React, {useMemo} from 'react';
 
 /**
  * Default selected columns for the report details table.
@@ -47,16 +47,14 @@ function ReportDetailsColumnsPage() {
     const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${report?.policyID}`);
     // Selector keeps re-renders scoped to this report's transactions. We intentionally return undefined
     // while the collection is loading so the caller can distinguish "loading" from "no transactions".
-    const reportTransactionsSelector = useCallback(
-        (transactions: OnyxCollection<Transaction>): Transaction[] | undefined => {
+    const [reportTransactions] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION, {
+        selector: (transactions: OnyxCollection<Transaction>): Transaction[] | undefined => {
             if (!transactions) {
                 return undefined;
             }
             return Object.values(transactions).filter((transaction): transaction is Transaction => !!transaction && transaction.reportID === reportID);
         },
-        [reportID],
-    );
-    const [reportTransactions] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION, {selector: reportTransactionsSelector}, [reportTransactionsSelector]);
+    });
     const currentUserDetails = useCurrentUserPersonalDetails();
 
     const allTypeCustomColumns = Object.values(CONST.SEARCH.REPORT_DETAILS_CUSTOM_COLUMNS) as SearchCustomColumnIds[];

src/pages/tasks/NewTaskDetailsPage.tsx

@@ -38,7 +38,7 @@ type NewTaskDetailsPageProps = PlatformStackScreenProps<NewTaskNavigatorParamLis
 function NewTaskDetailsPage({route}: NewTaskDetailsPageProps) {
     const [task] = useOnyx(ONYXKEYS.TASK);
     const [quickAction] = useOnyx(ONYXKEYS.NVP_QUICK_ACTION_GLOBAL_CREATE);
-    const [parentReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${task?.parentReportID}`, undefined, [task?.parentReportID]);
+    const [parentReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${task?.parentReportID}`);
     const ancestors = useAncestors(parentReport);
     const currentUserPersonalDetails = useCurrentUserPersonalDetails();
     const [taskCreatorAndAssigneeDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {