perf: decompose OptionRowLHN avatar/delegate logic into a separate component

BartekObudzinski · BartekObudzinski · commit 632b4eb34a6f · 2026-04-28T11:57:50.000+02:00
diff --git a/src/components/LHNOptionsList/OptionRowAvatar.tsx b/src/components/LHNOptionsList/OptionRowAvatar.tsx
@@ -0,0 +1,88 @@
+import React, {useMemo} from 'react';
+import type {ColorValue, StyleProp, ViewStyle} from 'react-native';
+import type {OnyxEntry} from 'react-native-onyx';
+import {usePersonalDetails} from '@components/OnyxListItemProvider';
+import {shouldOptionShowTooltip} from '@libs/OptionsListUtils';
+import {getDelegateAccountIDFromReportAction} from '@libs/ReportActionsUtils';
+import type {OptionData} from '@libs/ReportUtils';
+import CONST from '@src/CONST';
+import type {Report} from '@src/types/onyx';
+import LHNAvatar from './LHNAvatar';
+
+type OptionRowAvatarProps = {
+    optionItem: OptionData;
+    report: OnyxEntry<Report>;
+    isInFocusMode: boolean;
+    subscriptAvatarBorderColor: ColorValue;
+    secondaryAvatarBackgroundColor: ColorValue;
+    singleAvatarContainerStyle: StyleProp<ViewStyle>;
+};
+
+function OptionRowAvatar({optionItem, report, isInFocusMode, subscriptAvatarBorderColor, secondaryAvatarBackgroundColor, singleAvatarContainerStyle}: OptionRowAvatarProps) {
+    const personalDetails = usePersonalDetails();
+
+    const delegateAccountID = useMemo(
+        () => getDelegateAccountIDFromReportAction(optionItem?.parentReportAction),
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- getDelegateAccountIDFromReportAction is a stable import; only parentReportAction determines the result
+        [optionItem?.parentReportAction],
+    );
+
+    // Match the header's delegate avatar logic: when a delegate exists on the
+    // parent report action, the header (useReportActionAvatars) shows the
+    // delegate's avatar as primary instead of the report owner's.
+    const skipDelegate = report?.type === CONST.REPORT.TYPE.INVOICE || (optionItem?.isTaskReport && !report?.chatReportID);
+
+    const icons = useMemo(() => {
+        let result = optionItem?.icons ?? [];
+        if (!skipDelegate && delegateAccountID && personalDetails && result.length > 0) {
+            const delegateDetails = personalDetails[delegateAccountID];
+            if (delegateDetails) {
+                const updatedIcons = [...result];
+                const firstIcon = updatedIcons.at(0);
+                if (firstIcon) {
+                    updatedIcons[0] = {
+                        ...firstIcon,
+                        source: delegateDetails.avatar ?? '',
+                        name: delegateDetails.displayName ?? '',
+                        id: delegateAccountID,
+                    };
+                }
+                result = updatedIcons;
+            }
+        }
+
+        return result;
+    }, [optionItem?.icons, skipDelegate, delegateAccountID, personalDetails]);
+
+    const delegateTooltipAccountID = useMemo(() => {
+        if (!skipDelegate && delegateAccountID && personalDetails?.[delegateAccountID] && optionItem?.icons?.length) {
+            return Number(optionItem.icons.at(0)?.id ?? CONST.DEFAULT_NUMBER_ID);
+        }
+        return undefined;
+    }, [skipDelegate, delegateAccountID, personalDetails, optionItem?.icons]);
+
+    const firstIcon = optionItem.icons?.at(0);
+
+    if (!optionItem.icons?.length || !firstIcon) {
+        return null;
+    }
+
+    return (
+        <LHNAvatar
+            icons={icons}
+            shouldShowSubscript={!!optionItem.shouldShowSubscript}
+            size={isInFocusMode ? CONST.AVATAR_SIZE.SMALL : CONST.AVATAR_SIZE.DEFAULT}
+            subscriptAvatarBorderColor={subscriptAvatarBorderColor}
+            useMidSubscriptSize={isInFocusMode}
+            secondaryAvatarBackgroundColor={secondaryAvatarBackgroundColor}
+            singleAvatarContainerStyle={singleAvatarContainerStyle}
+            shouldShowTooltip={shouldOptionShowTooltip(optionItem)}
+            delegateAccountID={skipDelegate ? undefined : delegateAccountID}
+            delegateTooltipAccountID={delegateTooltipAccountID}
+        />
+    );
+}
+
+OptionRowAvatar.displayName = 'OptionRowAvatar';
+
+export default OptionRowAvatar;
diff --git a/src/components/LHNOptionsList/OptionRowLHN.tsx b/src/components/LHNOptionsList/OptionRowLHN.tsx
@@ -6,7 +6,7 @@ import DisplayNames from '@components/DisplayNames';
 import Hoverable from '@components/Hoverable';
 import Icon from '@components/Icon';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
-import {usePersonalDetails, useSession} from '@components/OnyxListItemProvider';
+import {useSession} from '@components/OnyxListItemProvider';
 import PressableWithSecondaryInteraction from '@components/PressableWithSecondaryInteraction';
 import {useProductTrainingContext} from '@components/ProductTrainingContext';
 import Text from '@components/Text';
@@ -26,9 +26,8 @@ import DateUtils from '@libs/DateUtils';
 import DomUtils from '@libs/DomUtils';
 import {containsCustomEmoji as containsCustomEmojiUtils, containsOnlyCustomEmoji} from '@libs/EmojiUtils';
 import FS from '@libs/Fullstory';
-import {shouldOptionShowTooltip, shouldUseBoldText} from '@libs/OptionsListUtils';
+import {shouldUseBoldText} from '@libs/OptionsListUtils';
 import ReportActionComposeFocusManager from '@libs/ReportActionComposeFocusManager';
-import {getDelegateAccountIDFromReportAction} from '@libs/ReportActionsUtils';
 import {isAdminRoom, isChatUsedForOnboarding as isChatUsedForOnboardingReportUtils, isConciergeChatReport, isGroupChat, isOneOnOneChat, isSystemChat} from '@libs/ReportUtils';
 import {startSpan} from '@libs/telemetry/activeSpans';
 import TextWithEmojiFragment from '@pages/inbox/report/comment/TextWithEmojiFragment';
@@ -37,8 +36,8 @@ import FreeTrial from '@pages/settings/Subscription/FreeTrial';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
-import LHNAvatar from './LHNAvatar';
 import {useLHNTooltipContext} from './LHNTooltipContext';
+import OptionRowAvatar from './OptionRowAvatar';
 import type {OptionRowLHNProps} from './types';
 
 function OptionRowLHN({
@@ -65,7 +64,6 @@ function OptionRowLHN({
     const {onboardingPurpose, onboarding, isFullscreenVisible, firstReportIDWithGBRorRBR, isScreenFocused, isReportsSplitNavigatorLast} = useLHNTooltipContext();
     const shouldShowRBRorGBRTooltip = firstReportIDWithGBRorRBR === reportID;
 
-    const personalDetails = usePersonalDetails();
     const session = useSession();
     const isOnboardingGuideAssigned = onboardingPurpose === CONST.ONBOARDING_CHOICES.MANAGE_TEAM && !session?.email?.includes('+');
     const isChatUsedForOnboarding = isChatUsedForOnboardingReportUtils(report, onboarding, conciergeReportID, onboardingPurpose);
@@ -101,45 +99,6 @@ function OptionRowLHN({
         [optionItem?.alternateText],
     );
 
-    const delegateAccountID = useMemo(
-        () => getDelegateAccountIDFromReportAction(optionItem?.parentReportAction),
-        // eslint-disable-next-line react-hooks/exhaustive-deps -- getDelegateAccountIDFromReportAction is a stable import; only parentReportAction determines the result
-        [optionItem?.parentReportAction],
-    );
-
-    // Match the header's delegate avatar logic: when a delegate exists on the
-    // parent report action, the header (useReportActionAvatars) shows the
-    // delegate's avatar as primary instead of the report owner's.
-    const skipDelegate = report?.type === CONST.REPORT.TYPE.INVOICE || (optionItem?.isTaskReport && !report?.chatReportID);
-    const icons = useMemo(() => {
-        let result = optionItem?.icons ?? [];
-        if (!skipDelegate && delegateAccountID && personalDetails && result.length > 0) {
-            const delegateDetails = personalDetails[delegateAccountID];
-            if (delegateDetails) {
-                const updatedIcons = [...result];
-                const firstIcon = updatedIcons.at(0);
-                if (firstIcon) {
-                    updatedIcons[0] = {
-                        ...firstIcon,
-                        source: delegateDetails.avatar ?? '',
-                        name: delegateDetails.displayName ?? '',
-                        id: delegateAccountID,
-                    };
-                }
-                result = updatedIcons;
-            }
-        }
-
-        return result;
-    }, [optionItem?.icons, skipDelegate, delegateAccountID, personalDetails]);
-
-    const delegateTooltipAccountID = useMemo(() => {
-        if (!skipDelegate && delegateAccountID && personalDetails?.[delegateAccountID] && optionItem?.icons?.length) {
-            return Number(optionItem.icons.at(0)?.id ?? CONST.DEFAULT_NUMBER_ID);
-        }
-        return undefined;
-    }, [skipDelegate, delegateAccountID, personalDetails, optionItem?.icons]);
-
     const singleAvatarContainerStyle = [styles.actionAvatar, styles.mr3];
 
     if (!optionItem && !isOptionFocused) {
@@ -219,7 +178,6 @@ function OptionRowLHN({
     const isStatusVisible = !!emojiCode && isOneOnOneChat(!isEmptyObject(report) ? report : undefined);
 
     const subscriptAvatarBorderColor = isOptionFocused ? focusedBackgroundColor : theme.sidebar;
-    const firstIcon = optionItem.icons?.at(0);
 
     // This is used to ensure that we display the text exactly as the user entered it when displaying LHN title, instead of parsing their text to HTML.
     const shouldParseFullTitle = optionItem?.parentReportAction?.actionName !== CONST.REPORT.ACTIONS.TYPE.ADD_COMMENT && !isGroupChat(report);
@@ -325,20 +283,15 @@ function OptionRowLHN({
                                 >
                                     <View style={sidebarInnerRowStyle}>
                                         <View style={[styles.flexRow, styles.alignItemsCenter]}>
-                                            {!!optionItem.icons?.length && !!firstIcon && (
-                                                <LHNAvatar
-                                                    icons={icons}
-                                                    shouldShowSubscript={!!optionItem.shouldShowSubscript}
-                                                    size={isInFocusMode ? CONST.AVATAR_SIZE.SMALL : CONST.AVATAR_SIZE.DEFAULT}
-                                                    subscriptAvatarBorderColor={hovered && !isOptionFocused ? hoveredBackgroundColor : subscriptAvatarBorderColor}
-                                                    useMidSubscriptSize={isInFocusMode}
-                                                    secondaryAvatarBackgroundColor={secondaryAvatarBgColor}
-                                                    singleAvatarContainerStyle={singleAvatarContainerStyle}
-                                                    shouldShowTooltip={shouldOptionShowTooltip(optionItem)}
-                                                    delegateAccountID={skipDelegate ? undefined : delegateAccountID}
-                                                    delegateTooltipAccountID={delegateTooltipAccountID}
-                                                />
-                                            )}
+                                            <OptionRowAvatar
+                                                optionItem={optionItem}
+                                                report={report}
+                                                isInFocusMode={isInFocusMode}
+                                                subscriptAvatarBorderColor={hovered && !isOptionFocused ? hoveredBackgroundColor : subscriptAvatarBorderColor}
+                                                secondaryAvatarBackgroundColor={secondaryAvatarBgColor}
+                                                singleAvatarContainerStyle={singleAvatarContainerStyle}
+                                            />
+
                                             <View style={contentContainerStyles}>
                                                 <View style={[styles.flexRow, styles.alignItemsCenter, styles.mw100, styles.overflowHidden]}>
                                                     <DisplayNames
