From 175b400b6da35189728a3a42aded2b8bc14b1c9e Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Wed, 18 Sep 2024 13:57:03 +0100
Subject: [PATCH] useMemo for the helper functions

---
 .../home/report/ReportActionItemSingle.tsx    | 201 ++++++++++--------
 1 file changed, 114 insertions(+), 87 deletions(-)

diff --git a/src/pages/home/report/ReportActionItemSingle.tsx b/src/pages/home/report/ReportActionItemSingle.tsx
index 8dcbcd180273..1128bbb781b6 100644
--- a/src/pages/home/report/ReportActionItemSingle.tsx
+++ b/src/pages/home/report/ReportActionItemSingle.tsx
@@ -200,99 +200,126 @@ function ReportActionItemSingle({
         [action, isWorkspaceActor, actorAccountID],
     );
 
-    const getAvatar = () => {
-        if (displayAllActors) {
-            return (
-                <MultipleAvatars
-                    icons={[icon, secondaryAvatar]}
-                    isInReportAction
-                    shouldShowTooltip
-                    secondAvatarStyle={[StyleUtils.getBackgroundAndBorderStyle(theme.appBG), isHovered ? StyleUtils.getBackgroundAndBorderStyle(theme.hoverComponentBG) : undefined]}
-                />
-            );
-        }
-        if (shouldShowSubscriptAvatar) {
+    const getAvatar = useMemo(() => {
+        return () => {
+            if (displayAllActors) {
+                return (
+                    <MultipleAvatars
+                        icons={[icon, secondaryAvatar]}
+                        isInReportAction
+                        shouldShowTooltip
+                        secondAvatarStyle={[StyleUtils.getBackgroundAndBorderStyle(theme.appBG), isHovered ? StyleUtils.getBackgroundAndBorderStyle(theme.hoverComponentBG) : undefined]}
+                    />
+                );
+            }
+            if (shouldShowSubscriptAvatar) {
+                return (
+                    <SubscriptAvatar
+                        mainAvatar={icon}
+                        secondaryAvatar={secondaryAvatar}
+                        noMargin
+                    />
+                );
+            }
             return (
-                <SubscriptAvatar
-                    mainAvatar={icon}
-                    secondaryAvatar={secondaryAvatar}
-                    noMargin
-                />
+                <UserDetailsTooltip
+                    accountID={Number(actorAccountID ?? -1)}
+                    delegateAccountID={Number(action?.delegateAccountID ?? -1)}
+                    icon={icon}
+                >
+                    <View>
+                        <Avatar
+                            containerStyles={[styles.actionAvatar]}
+                            source={icon.source}
+                            type={icon.type}
+                            name={icon.name}
+                            avatarID={icon.id}
+                            fallbackIcon={fallbackIcon}
+                        />
+                    </View>
+                </UserDetailsTooltip>
             );
-        }
-        return (
-            <UserDetailsTooltip
-                accountID={Number(actorAccountID ?? -1)}
-                delegateAccountID={Number(action?.delegateAccountID ?? -1)}
-                icon={icon}
-            >
-                <View>
-                    <Avatar
-                        containerStyles={[styles.actionAvatar]}
-                        source={icon.source}
-                        type={icon.type}
-                        name={icon.name}
-                        avatarID={icon.id}
-                        fallbackIcon={fallbackIcon}
-                    />
-                </View>
-            </UserDetailsTooltip>
-        );
-    };
+        };
+    }, [
+        displayAllActors,
+        shouldShowSubscriptAvatar,
+        actorAccountID,
+        action?.delegateAccountID,
+        icon,
+        styles.actionAvatar,
+        fallbackIcon,
+        secondaryAvatar,
+        StyleUtils,
+        theme.appBG,
+        theme.hoverComponentBG,
+        isHovered,
+    ]);
 
-    const getHeading = () => {
-        if (displayAllActors && secondaryAvatar.name) {
+    const getHeading = useMemo(() => {
+        return () => {
+            if (displayAllActors && secondaryAvatar.name && isReportPreviewAction) {
+                return (
+                    <View style={[styles.flexRow]}>
+                        <ReportActionItemFragment
+                            style={[styles.flex1]}
+                            key={`person-${action?.reportActionID}-${0}`}
+                            accountID={actorAccountID ?? -1}
+                            fragment={{...personArray[0], type: 'TEXT', text: displayName ?? ''}}
+                            delegateAccountID={action?.delegateAccountID}
+                            isSingleLine
+                            actorIcon={icon}
+                            moderationDecision={getReportActionMessage(action)?.moderationDecision?.decision}
+                        />
+                        <Text
+                            numberOfLines={1}
+                            style={[styles.chatItemMessageHeaderSender, styles.pre]}
+                        >
+                            {` & `}
+                        </Text>
+                        <ReportActionItemFragment
+                            style={[styles.flex1]}
+                            key={`person-${action?.reportActionID}-${1}`}
+                            accountID={parseInt(`${secondaryAvatar?.id ?? -1}`, 10)}
+                            fragment={{...personArray[1], type: 'TEXT', text: secondaryAvatar.name ?? ''}}
+                            delegateAccountID={action?.delegateAccountID}
+                            isSingleLine
+                            actorIcon={secondaryAvatar}
+                            moderationDecision={getReportActionMessage(action)?.moderationDecision?.decision}
+                        />
+                    </View>
+                );
+            }
             return (
-                <View style={[styles.flexRow]}>
-                    <ReportActionItemFragment
-                        style={[styles.flex1]}
-                        // eslint-disable-next-line react/no-array-index-key
-                        key={`person-${action?.reportActionID}-${0}`}
-                        accountID={actorAccountID ?? -1}
-                        fragment={{...personArray[0], type: 'TEXT', text: displayName ?? ''}}
-                        delegateAccountID={action?.delegateAccountID}
-                        isSingleLine
-                        actorIcon={icon}
-                        moderationDecision={getReportActionMessage(action)?.moderationDecision?.decision}
-                    />
-                    <Text
-                        numberOfLines={1}
-                        style={[styles.chatItemMessageHeaderSender, styles.pre]}
-                    >
-                        {` & `}
-                    </Text>
-                    <ReportActionItemFragment
-                        style={[styles.flex1]}
-                        // eslint-disable-next-line react/no-array-index-key
-                        key={`person-${action?.reportActionID}-${1}`}
-                        accountID={parseInt(`${secondaryAvatar?.id ?? -1}`, 10)}
-                        fragment={{...personArray[1], type: 'TEXT', text: secondaryAvatar.name ?? ''}}
-                        delegateAccountID={action?.delegateAccountID}
-                        isSingleLine
-                        actorIcon={secondaryAvatar}
-                        moderationDecision={getReportActionMessage(action)?.moderationDecision?.decision}
-                    />
+                <View>
+                    {personArray?.map((fragment) => (
+                        <ReportActionItemFragment
+                            style={[styles.flex1]}
+                            key={`person-${action?.reportActionID}-${actorAccountID}`}
+                            accountID={actorAccountID ?? -1}
+                            fragment={{...fragment, type: fragment.type ?? '', text: fragment.text ?? ''}}
+                            delegateAccountID={action?.delegateAccountID}
+                            isSingleLine
+                            actorIcon={icon}
+                            moderationDecision={getReportActionMessage(action)?.moderationDecision?.decision}
+                        />
+                    ))}
                 </View>
             );
-        }
-        return (
-            <View>
-                {personArray?.map((fragment, index) => (
-                    <ReportActionItemFragment
-                        style={[styles.flex1]}
-                        // eslint-disable-next-line react/no-array-index-key
-                        key={`person-${action?.reportActionID}-${index}`}
-                        accountID={actorAccountID ?? -1}
-                        fragment={{...fragment, type: fragment.type ?? '', text: fragment.text ?? ''}}
-                        delegateAccountID={action?.delegateAccountID}
-                        isSingleLine
-                        actorIcon={icon}
-                        moderationDecision={getReportActionMessage(action)?.moderationDecision?.decision}
-                    />
-                ))}
-            </View>
-        );
-    };
+        };
+    }, [
+        displayAllActors,
+        secondaryAvatar,
+        isReportPreviewAction,
+        personArray,
+        styles.flexRow,
+        styles.flex1,
+        styles.chatItemMessageHeaderSender,
+        styles.pre,
+        action,
+        actorAccountID,
+        displayName,
+        icon,
+    ]);
 
     const hasEmojiStatus = !displayAllActors && status?.emojiCode;
     const formattedDate = DateUtils.getStatusUntilDate(status?.clearAfter ?? '');