memoize custom emoji function uses

Author: c3024

src/components/EmojiWithTooltip/index.android.tsx

@@ -1,11 +1,13 @@
+import {useMemo} from 'react';
 import Text from '@components/Text';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {containsCustomEmoji} from '@libs/EmojiUtils';
 import type EmojiWithTooltipProps from './types';
 
 function EmojiWithTooltip({emojiCode, style = {}}: EmojiWithTooltipProps) {
+    const isCustomEmoji = useMemo(() => containsCustomEmoji(emojiCode), [emojiCode]);
     const styles = useThemeStyles();
-    return <Text style={[style, containsCustomEmoji(emojiCode) && styles.customEmojiFont]}>{emojiCode}</Text>;
+    return <Text style={[style, isCustomEmoji && styles.customEmojiFont]}>{emojiCode}</Text>;
 }
 
 EmojiWithTooltip.displayName = 'EmojiWithTooltip';

src/components/LHNOptionsList/OptionRowLHN.tsx

@@ -137,7 +137,11 @@ function OptionRowLHN({
     const contentContainerStyles = isInFocusMode ? [styles.flex1, styles.flexRow, styles.overflowHidden, StyleUtils.getCompactContentContainerStyles()] : [styles.flex1];
     const hoveredBackgroundColor = !!styles.sidebarLinkHover && 'backgroundColor' in styles.sidebarLinkHover ? styles.sidebarLinkHover.backgroundColor : theme.sidebar;
     const focusedBackgroundColor = styles.sidebarLinkActive.backgroundColor;
-    const alternateTextContainsCustomEmojiWithText = containsCustomEmojiUtils(optionItem.alternateText) && !containsOnlyCustomEmoji(optionItem.alternateText);
+    const alternateTextContainsCustomEmojiWithText = useMemo(
+        () => containsCustomEmojiUtils(optionItem.alternateText) && !containsOnlyCustomEmoji(optionItem.alternateText),
+        [optionItem.alternateText],
+    );
+
     /**
      * Show the ReportActionContextMenu modal popover.
      *

src/components/Text.tsx

@@ -1,5 +1,5 @@
 import type {ForwardedRef} from 'react';
-import React, {useContext} from 'react';
+import React, {useContext, useMemo} from 'react';
 // eslint-disable-next-line no-restricted-imports
 import {Text as RNText, StyleSheet} from 'react-native';
 import type {TextProps as RNTextProps, TextStyle} from 'react-native';
@@ -51,7 +51,12 @@ function Text(
     if (!componentStyle.lineHeight && componentStyle.fontSize === variables.fontSizeNormal && shouldUseDefaultLineHeight) {
         componentStyle.lineHeight = variables.fontSizeNormalHeight;
     }
-    if (typeof children === 'string' && containsOnlyCustomEmoji(children)) {
+
+    const isOnlyCustomEmoji = useMemo(() => {
+        return typeof children === 'string' ? containsOnlyCustomEmoji(children) : false;
+    }, [children]);
+
+    if (isOnlyCustomEmoji) {
         componentStyle.fontFamily = FontUtils.fontFamily.single.CUSTOM_EMOJI_FONT?.fontFamily;
     }
 

src/pages/home/report/comment/TextCommentFragment.tsx

@@ -70,7 +70,7 @@ function TextCommentFragment({fragment, styleAsDeleted, reportActionID, styleAsM
     // on native, we render it as text, not as html
     // on other device, only render it as text if the only difference is <br /> tag
     const containsOnlyEmojis = containsOnlyEmojisUtil(text ?? '');
-    const containsOnlyCustomEmoji = containsOnlyCustomEmojiUtil(text);
+    const containsOnlyCustomEmoji = useMemo(() => containsOnlyCustomEmojiUtil(text), [text]);
     const containsEmojis = CONST.REGEX.ALL_EMOJIS.test(text ?? '');
     if (!shouldRenderAsText(html, text ?? '') && !(containsOnlyEmojis && styleAsDeleted)) {
         const editedTag = fragment?.isEdited ? `<edited ${styleAsDeleted ? 'deleted' : ''}></edited>` : '';

src/pages/home/report/comment/shouldRenderAsText/index.native.ts

@@ -1,4 +1,5 @@
 import {Str} from 'expensify-common';
+import {useMemo} from 'react';
 import {containsCustomEmoji} from '@libs/EmojiUtils';
 
 /**
@@ -9,5 +10,6 @@ export default function shouldRenderAsText(html: string, text: string): boolean
     // More info: https://github.com/Expensify/App/pull/35838#issuecomment-1964839350
     const htmlWithoutLineBreak = Str.replaceAll(html, '<br />', '\n');
     const htmlWithoutEmojiOpenTag = Str.replaceAll(htmlWithoutLineBreak, '<emoji>', '');
-    return Str.replaceAll(htmlWithoutEmojiOpenTag, '</emoji>', '') === text && !containsCustomEmoji(text);
+    const hasCustomEmoji = useMemo(() => containsCustomEmoji(text), [text]);
+    return Str.replaceAll(htmlWithoutEmojiOpenTag, '</emoji>', '') === text && !hasCustomEmoji;
 }