[Perf] ReportScreen rendering optimisation part 2

src/components/ReportActionItem/TaskPreview.js

@@ -17,19 +17,16 @@ import * as LocalePhoneNumber from '@libs/LocalePhoneNumber';
 import Navigation from '@libs/Navigation/Navigation';
 import * as ReportUtils from '@libs/ReportUtils';
 import reportActionPropTypes from '@pages/home/report/reportActionPropTypes';
-import personalDetailsPropType from '@pages/personalDetailsPropType';
 import styles from '@styles/styles';
 import * as StyleUtils from '@styles/StyleUtils';
 import * as Session from '@userActions/Session';
 import * as Task from '@userActions/Task';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
+import {usePersonalDetails} from '@components/OnyxProvider';
 
 const propTypes = {
-    /** All personal details asssociated with user */
-    personalDetailsList: PropTypes.objectOf(personalDetailsPropType),
-
     /** The ID of the associated taskReport */
     taskReportID: PropTypes.string.isRequired,
 
@@ -59,12 +56,12 @@ const propTypes = {
 
 const defaultProps = {
     ...withCurrentUserPersonalDetailsDefaultProps,
-    personalDetailsList: {},
     taskReport: {},
     isHovered: false,
 };
 
 function TaskPreview(props) {
+    const personalDetails = usePersonalDetails() || CONST.EMPTY_OBJECT;
     // The reportAction might not contain details regarding the taskReport
     // Only the direct parent reportAction will contain details about the taskReport
     // Other linked reportActions will only contain the taskReportID and we will grab the details from there
@@ -73,8 +70,8 @@ function TaskPreview(props) {
         : props.action.childStateNum === CONST.REPORT.STATE_NUM.SUBMITTED && props.action.childStatusNum === CONST.REPORT.STATUS.APPROVED;
     const taskTitle = props.taskReport.reportName || props.action.childReportName;
     const taskAssigneeAccountID = Task.getTaskAssigneeAccountID(props.taskReport) || props.action.childManagerAccountID;
-    const assigneeLogin = lodashGet(props.personalDetailsList, [taskAssigneeAccountID, 'login'], '');
-    const assigneeDisplayName = lodashGet(props.personalDetailsList, [taskAssigneeAccountID, 'displayName'], '');
+    const assigneeLogin = lodashGet(personalDetails, [taskAssigneeAccountID, 'login'], '');
+    const assigneeDisplayName = lodashGet(personalDetails, [taskAssigneeAccountID, 'displayName'], '');
     const taskAssignee = assigneeDisplayName || LocalePhoneNumber.formatPhoneNumber(assigneeLogin);
     const htmlForTaskPreview =
         taskAssignee && taskAssigneeAccountID !== 0
@@ -132,9 +129,5 @@ export default compose(
             key: ({taskReportID}) => `${ONYXKEYS.COLLECTION.REPORT}${taskReportID}`,
             initialValue: {},
         },
-        personalDetailsList: {
-            key: ONYXKEYS.PERSONAL_DETAILS_LIST,
-            initialValue: {},
-        },
     }),
 )(TaskPreview);

src/components/UserDetailsTooltip/BaseUserDetailsTooltip.web.js

@@ -1,8 +1,7 @@
+import React, {useCallback} from 'react';
+import {View, Text} from 'react-native';
 import Str from 'expensify-common/lib/str';
 import lodashGet from 'lodash/get';
-import React, {useCallback} from 'react';
-import {Text, View} from 'react-native';
-import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import Avatar from '@components/Avatar';
 import Tooltip from '@components/Tooltip';
@@ -11,13 +10,14 @@ import * as LocalePhoneNumber from '@libs/LocalePhoneNumber';
 import * as UserUtils from '@libs/UserUtils';
 import styles from '@styles/styles';
 import CONST from '@src/CONST';
-import ONYXKEYS from '@src/ONYXKEYS';
+import {usePersonalDetails} from '@components/OnyxProvider';
 import {defaultProps, propTypes} from './userDetailsTooltipPropTypes';
 
 function BaseUserDetailsTooltip(props) {
     const {translate} = useLocalize();
+    const personalDetails = usePersonalDetails() || CONST.EMPTY_OBJECT;
 
-    const userDetails = lodashGet(props.personalDetailsList, props.accountID, props.fallbackUserDetails);
+    const userDetails = lodashGet(personalDetails, props.accountID, props.fallbackUserDetails);
     let userDisplayName = userDetails.displayName ? userDetails.displayName.trim() : '';
     let userLogin = (userDetails.login || '').trim() && !_.isEqual(userDetails.login, userDetails.displayName) ? Str.removeSMSDomain(userDetails.login) : '';
     let userAvatar = userDetails.avatar;
@@ -26,7 +26,7 @@ function BaseUserDetailsTooltip(props) {
     // We replace the actor's email, name, and avatar with the Copilot manually for now. This will be improved upon when
     // the Copilot feature is implemented.
     if (props.delegateAccountID) {
-        const delegateUserDetails = lodashGet(props.personalDetailsList, props.delegateAccountID, {});
+        const delegateUserDetails = lodashGet(personalDetails, props.delegateAccountID, {});
         const delegateUserDisplayName = delegateUserDetails.displayName ? delegateUserDetails.displayName.trim() : '';
         userDisplayName = `${delegateUserDisplayName} (${translate('reportAction.asCopilot')} ${userDisplayName})`;
         userLogin = delegateUserDetails.login;
@@ -78,8 +78,4 @@ BaseUserDetailsTooltip.propTypes = propTypes;
 BaseUserDetailsTooltip.defaultProps = defaultProps;
 BaseUserDetailsTooltip.displayName = 'BaseUserDetailsTooltip';
 
-export default withOnyx({
-    personalDetailsList: {
-        key: ONYXKEYS.PERSONAL_DETAILS_LIST,
-    },
-})(BaseUserDetailsTooltip);
+export default BaseUserDetailsTooltip;

src/components/withCurrentUserPersonalDetails.tsx

@@ -2,15 +2,14 @@ import React, {ComponentType, ForwardedRef, RefAttributes, useMemo} from 'react'
 import {OnyxEntry, withOnyx} from 'react-native-onyx';
 import getComponentDisplayName from '@libs/getComponentDisplayName';
 import personalDetailsPropType from '@pages/personalDetailsPropType';
+import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {PersonalDetails, Session} from '@src/types/onyx';
+import {usePersonalDetails} from './OnyxProvider';
 
 type CurrentUserPersonalDetails = PersonalDetails | Record<string, never>;
 
 type OnyxProps = {
-    /** Personal details of all the users, including current user */
-    personalDetails: OnyxEntry<Record<string, PersonalDetails>>;
-
     /** Session of the current user */
     session: OnyxEntry<Session>;
 };
@@ -34,8 +33,9 @@ export default function <TProps extends ComponentProps, TRef>(
     WrappedComponent: ComponentType<TProps & RefAttributes<TRef>>,
 ): ComponentType<Omit<Omit<TProps, keyof HOCProps> & RefAttributes<TRef>, keyof OnyxProps>> {
     function WithCurrentUserPersonalDetails(props: Omit<TProps, keyof HOCProps>, ref: ForwardedRef<TRef>) {
+        const personalDetails = usePersonalDetails() || CONST.EMPTY_OBJECT;
         const accountID = props.session?.accountID ?? 0;
-        const accountPersonalDetails = props.personalDetails?.[accountID];
+        const accountPersonalDetails = personalDetails?.[accountID];
         const currentUserPersonalDetails: CurrentUserPersonalDetails = useMemo(
             () => (accountPersonalDetails ? {...accountPersonalDetails, accountID} : {}),
             [accountPersonalDetails, accountID],
@@ -55,9 +55,6 @@ export default function <TProps extends ComponentProps, TRef>(
     const withCurrentUserPersonalDetails = React.forwardRef(WithCurrentUserPersonalDetails);
 
     return withOnyx<Omit<TProps, keyof HOCProps> & RefAttributes<TRef>, OnyxProps>({
-        personalDetails: {
-            key: ONYXKEYS.PERSONAL_DETAILS_LIST,
-        },
         session: {
             key: ONYXKEYS.SESSION,
         },