perf: narrow Onyx subs in InvoiceSenderField and ReportField

Author: OlimpiaZurek

src/components/MoneyRequestConfirmationList/sections/InvoiceSenderField.tsx

@@ -1,6 +1,6 @@
 import {emailSelector} from '@selectors/Session';
 import React from 'react';
-import type {OnyxEntry} from 'react-native-onyx';
+import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
 import MenuItem from '@components/MenuItem';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
@@ -35,37 +35,42 @@ type InvoiceSenderFieldProps = {
     transaction: OnyxEntry<OnyxTypes.Transaction>;
 };
 
+const senderWorkspaceSelector = (policy: OnyxEntry<OnyxTypes.Policy>) => (policy ? {id: policy.id, name: policy.name, avatarURL: policy.avatarURL} : undefined);
+
+const createCanUpdateSenderWorkspaceSelector =
+    (selectedParticipants: Participant[], currentUserLogin: string | undefined, isFromGlobalCreate: boolean) =>
+    (policies: OnyxCollection<OnyxTypes.Policy>): boolean => {
+        const isInvoiceRoomParticipant = selectedParticipants.some((participant) => participant.isInvoiceRoom);
+        return canSendInvoice(policies ?? null, currentUserLogin) && isFromGlobalCreate && !isInvoiceRoomParticipant;
+    };
+
 function InvoiceSenderField({selectedParticipants, isReadOnly, didConfirm, iouType, reportID, transaction}: InvoiceSenderFieldProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
 
-    // canSendInvoice needs the full policy collection to check all admin workspaces
-    const [allPolicies] = useOnyx(ONYXKEYS.COLLECTION.POLICY);
+    const senderPolicyID = selectedParticipants.find((participant) => participant.isSender)?.policyID;
+
+    const [senderWorkspace] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${senderPolicyID}`, {selector: senderWorkspaceSelector});
     const [currentUserLogin] = useOnyx(ONYXKEYS.SESSION, {selector: emailSelector});
 
     const isFromGlobalCreate = !!transaction?.isFromGlobalCreate;
 
-    const senderWorkspace = (() => {
-        const senderWorkspaceParticipant = selectedParticipants.find((participant) => participant.isSender);
-        return allPolicies?.[`${ONYXKEYS.COLLECTION.POLICY}${senderWorkspaceParticipant?.policyID}`];
-    })();
-
-    const canUpdateSenderWorkspace = (() => {
-        const isInvoiceRoomParticipant = selectedParticipants.some((participant) => participant.isInvoiceRoom);
-        return canSendInvoice(allPolicies, currentUserLogin) && isFromGlobalCreate && !isInvoiceRoomParticipant;
-    })();
+    // canSendInvoice needs the full policy collection to check all admin workspaces
+    const [canUpdateSenderWorkspace] = useOnyx(ONYXKEYS.COLLECTION.POLICY, {
+        selector: createCanUpdateSenderWorkspaceSelector(selectedParticipants, currentUserLogin, isFromGlobalCreate),
+    });
 
     return (
         <MenuItem
             avatarID={senderWorkspace?.id}
-            shouldShowRightIcon={!isReadOnly && canUpdateSenderWorkspace}
+            shouldShowRightIcon={!isReadOnly && !!canUpdateSenderWorkspace}
             title={senderWorkspace?.name}
-            icon={senderWorkspace?.avatarURL ? senderWorkspace?.avatarURL : getDefaultWorkspaceAvatar(senderWorkspace?.name)}
+            icon={senderWorkspace?.avatarURL ? senderWorkspace.avatarURL : getDefaultWorkspaceAvatar(senderWorkspace?.name)}
             iconType={CONST.ICON_TYPE_WORKSPACE}
             description={translate('workspace.common.workspace')}
             label={translate('workspace.invoices.sendFrom')}
             isLabelHoverable={false}
-            interactive={!isReadOnly && canUpdateSenderWorkspace}
+            interactive={!isReadOnly && !!canUpdateSenderWorkspace}
             onPress={() => {
                 if (!transaction?.transactionID) {
                     return;

src/components/MoneyRequestConfirmationList/sections/ReportField.tsx

@@ -16,6 +16,9 @@ import ROUTES from '@src/ROUTES';
 import type * as OnyxTypes from '@src/types/onyx';
 import type {Participant} from '@src/types/onyx/IOU';
 
+const createOutstandingReportsForPolicySelector = (policyID: string | undefined) => (derived: OnyxEntry<OnyxTypes.OutstandingReportsByPolicyIDDerivedValue>) =>
+    derived?.[policyID ?? CONST.DEFAULT_NUMBER_ID];
+
 type ReportFieldProps = {
     /** The selected participants */
     selectedParticipants: Participant[];
@@ -50,8 +53,9 @@ function ReportField({selectedParticipants, iouType, reportID, reportActionID, a
     const {translate, localeCompare} = useLocalize();
 
     const reportAttributes = useReportAttributes();
+    const policyID = selectedParticipants?.at(0)?.policyID;
     const [reportNameValuePairs] = useOnyx(ONYXKEYS.COLLECTION.REPORT_NAME_VALUE_PAIRS);
-    const [outstandingReportsByPolicyID] = useOnyx(ONYXKEYS.DERIVED.OUTSTANDING_REPORTS_BY_POLICY_ID);
+    const [outstandingReportsForPolicy] = useOnyx(ONYXKEYS.DERIVED.OUTSTANDING_REPORTS_BY_POLICY_ID, {selector: createOutstandingReportsForPolicySelector(policyID)});
 
     // Per-key report subscriptions instead of full COLLECTION.REPORT
     const [transactionReportEntry] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${transaction?.reportID}`);
@@ -66,18 +70,13 @@ function ReportField({selectedParticipants, iouType, reportID, reportActionID, a
      * We need to check if the transaction report exists first in order to prevent the outstanding reports from being used.
      * Also we need to check if transaction report exists in outstanding reports in order to show a correct report name.
      */
-    const policyID = selectedParticipants?.at(0)?.policyID;
     const shouldUseTransactionReport = (!!transactionReportEntry && isReportOutstanding(transactionReportEntry, policyID, undefined, false)) || isUnreported;
 
     const ownerAccountID = selectedParticipants?.at(0)?.ownerAccountID;
 
-    const availableOutstandingReports = getOutstandingReportsForUser(
-        policyID,
-        ownerAccountID,
-        outstandingReportsByPolicyID?.[policyID ?? CONST.DEFAULT_NUMBER_ID] ?? {},
-        reportNameValuePairs,
-        false,
-    ).sort((a, b) => localeCompare(a?.reportName?.toLowerCase() ?? '', b?.reportName?.toLowerCase() ?? ''));
+    const availableOutstandingReports = getOutstandingReportsForUser(policyID, ownerAccountID, outstandingReportsForPolicy ?? {}, reportNameValuePairs, false).sort((a, b) =>
+        localeCompare(a?.reportName?.toLowerCase() ?? '', b?.reportName?.toLowerCase() ?? ''),
+    );
 
     const outstandingReportID = isPolicyExpenseChat ? (iouReportIDFromMain ?? availableOutstandingReports.at(0)?.reportID) : reportID;