Merge pull request Expensify#88511 from callstack-internal/perf/report-welcome-text

[No QA] perf: avoid mapping all personal details in ReportWelcomeText

Author: mountiny

src/components/ReportWelcomeText.tsx

@@ -3,7 +3,6 @@ import {View} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 import useEnvironment from '@hooks/useEnvironment';
 import useLocalize from '@hooks/useLocalize';
-import useMappedPersonalDetails, {personalDetailMapper} from '@hooks/useMappedPersonalDetails';
 import useOnyx from '@hooks/useOnyx';
 import usePreferredPolicy from '@hooks/usePreferredPolicy';
 import useReportAttributes from '@hooks/useReportAttributes';
@@ -28,7 +27,7 @@ import CONST from '@src/CONST';
 import type {IOUType} from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
-import type {OnyxInputOrEntry, PersonalDetailsList, Policy, Report} from '@src/types/onyx';
+import type {Policy, Report} from '@src/types/onyx';
 import RenderHTML from './RenderHTML';
 import Text from './Text';
 
@@ -45,7 +44,7 @@ function ReportWelcomeText({report, policy}: ReportWelcomeTextProps) {
     const styles = useThemeStyles();
     const {environmentURL} = useEnvironment();
     const reportAttributes = useReportAttributes();
-    const [personalDetails] = useMappedPersonalDetails(personalDetailMapper);
+    const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST);
     const {isRestrictedToPreferredPolicy} = usePreferredPolicy();
     const isPolicyExpenseChat = isPolicyExpenseChatReportUtils(report);
     // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
@@ -108,9 +107,7 @@ function ReportWelcomeText({report, policy}: ReportWelcomeTextProps) {
     // If we are the only participant (e.g. solo group chat) then keep the current user personal details so the welcome message does not show up empty.
     const shouldExcludeCurrentUser = participantAccountIDs.length > 0;
     const participantAccountIDsExcludeCurrentUser = getParticipantsAccountIDsForDisplay(report, undefined, undefined, shouldExcludeCurrentUser);
-    const participantPersonalDetailListExcludeCurrentUser = Object.values(
-        getPersonalDetailsForAccountIDs(participantAccountIDsExcludeCurrentUser, personalDetails as OnyxInputOrEntry<PersonalDetailsList>),
-    );
+    const participantPersonalDetailListExcludeCurrentUser = Object.values(getPersonalDetailsForAccountIDs(participantAccountIDsExcludeCurrentUser, personalDetails));
     const welcomeMessage = SidebarUtils.getWelcomeMessage({
         report,
         policy,

src/pages/Debug/Report/DebugReportActions.tsx

@@ -6,7 +6,6 @@ import SelectionList from '@components/SelectionList';
 import RadioListItem from '@components/SelectionList/ListItem/RadioListItem';
 import useDebouncedState from '@hooks/useDebouncedState';
 import useLocalize from '@hooks/useLocalize';
-import useMappedPersonalDetails, {personalDetailMapper} from '@hooks/useMappedPersonalDetails';
 import useOnyx from '@hooks/useOnyx';
 import useReportAttributes from '@hooks/useReportAttributes';
 import useReportIsArchived from '@hooks/useReportIsArchived';
@@ -20,7 +19,7 @@ import SidebarUtils from '@libs/SidebarUtils';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
-import type {OnyxInputOrEntry, PersonalDetailsList, ReportAction, ReportActions} from '@src/types/onyx';
+import type {ReportAction, ReportActions} from '@src/types/onyx';
 
 type DebugReportActionsProps = {
     reportID: string;
@@ -36,7 +35,7 @@ function DebugReportActions({reportID}: DebugReportActionsProps) {
     const [invoiceReceiverPolicy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${invoiceReceiverPolicyID}`);
     const isReportArchived = useReportIsArchived(reportID);
     const ifUserCanPerformWriteAction = canUserPerformWriteAction(report, isReportArchived);
-    const [personalDetails] = useMappedPersonalDetails(personalDetailMapper);
+    const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST);
     const [conciergeReportID] = useOnyx(ONYXKEYS.CONCIERGE_REPORT_ID);
     const reportAttributes = useReportAttributes();
 
@@ -56,7 +55,7 @@ function DebugReportActions({reportID}: DebugReportActionsProps) {
         [getSortedAllReportActionsSelector],
     );
     const participantAccountIDs = getParticipantsAccountIDsForDisplay(report, undefined, undefined, true);
-    const participantPersonalDetailList = Object.values(getPersonalDetailsForAccountIDs(participantAccountIDs, personalDetails as OnyxInputOrEntry<PersonalDetailsList>));
+    const participantPersonalDetailList = Object.values(getPersonalDetailsForAccountIDs(participantAccountIDs, personalDetails));
 
     const getReportActionDebugText = useCallback(
         (reportAction: ReportAction) => {

tests/unit/ReportWelcomeTextTest.tsx

@@ -162,7 +162,7 @@ describe('ReportWelcomeText', () => {
         expect(screen.getByText('Expensify')).toBeTruthy();
     });
 
-    it('uses personal details from Onyx via useMappedPersonalDetails', async () => {
+    it('uses personal details from Onyx', async () => {
         const report: Report = {
             reportID: '5',
             type: CONST.REPORT.TYPE.CHAT,