From 9070a4eb08231e538030a2e783883805546a3dd0 Mon Sep 17 00:00:00 2001
From: Adam Horodyski <ad.horodyski@gmail.com>
Date: Wed, 22 Nov 2023 14:47:54 +0100
Subject: [PATCH] chore: ensure stable references on renderItem for emoji and
 mention suggestions

---
 src/components/EmojiSuggestions.tsx   |  51 +++++++------
 src/components/MentionSuggestions.tsx | 105 +++++++++++++-------------
 2 files changed, 81 insertions(+), 75 deletions(-)

diff --git a/src/components/EmojiSuggestions.tsx b/src/components/EmojiSuggestions.tsx
index 1f14a63462bd..f141624699ed 100644
--- a/src/components/EmojiSuggestions.tsx
+++ b/src/components/EmojiSuggestions.tsx
@@ -1,4 +1,4 @@
-import React, {ReactElement} from 'react';
+import React, {ReactElement, useCallback} from 'react';
 import {View} from 'react-native';
 import type {SimpleEmoji} from '@libs/EmojiTrie';
 import * as EmojiUtils from '@libs/EmojiUtils';
@@ -48,30 +48,33 @@ function EmojiSuggestions({emojis, onSelect, prefix, isEmojiPickerLarge, preferr
     /**
      * Render an emoji suggestion menu item component.
      */
-    const renderSuggestionMenuItem = (item: SimpleEmoji): ReactElement => {
-        const styledTextArray = getStyledTextArray(item.name, prefix);
+    const renderSuggestionMenuItem = useCallback(
+        (item: SimpleEmoji): ReactElement => {
+            const styledTextArray = getStyledTextArray(item.name, prefix);
 
-        return (
-            <View style={styles.autoCompleteSuggestionContainer}>
-                <Text style={styles.emojiSuggestionsEmoji}>{EmojiUtils.getEmojiCodeWithSkinColor(item, preferredSkinToneIndex)}</Text>
-                <Text
-                    numberOfLines={2}
-                    style={styles.emojiSuggestionsText}
-                >
-                    :
-                    {styledTextArray.map(({text, isColored}) => (
-                        <Text
-                            key={`${text}+${isColored}`}
-                            style={StyleUtils.getColoredBackgroundStyle(theme, isColored)}
-                        >
-                            {text}
-                        </Text>
-                    ))}
-                    :
-                </Text>
-            </View>
-        );
-    };
+            return (
+                <View style={styles.autoCompleteSuggestionContainer}>
+                    <Text style={styles.emojiSuggestionsEmoji}>{EmojiUtils.getEmojiCodeWithSkinColor(item, preferredSkinToneIndex)}</Text>
+                    <Text
+                        numberOfLines={2}
+                        style={styles.emojiSuggestionsText}
+                    >
+                        :
+                        {styledTextArray.map(({text, isColored}) => (
+                            <Text
+                                key={`${text}+${isColored}`}
+                                style={StyleUtils.getColoredBackgroundStyle(theme, isColored)}
+                            >
+                                {text}
+                            </Text>
+                        ))}
+                        :
+                    </Text>
+                </View>
+            );
+        },
+        [styles, theme, prefix, preferredSkinToneIndex],
+    );
 
     return (
         <AutoCompleteSuggestions
diff --git a/src/components/MentionSuggestions.tsx b/src/components/MentionSuggestions.tsx
index 6692e7c3e4dd..ae4b566f98ee 100644
--- a/src/components/MentionSuggestions.tsx
+++ b/src/components/MentionSuggestions.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useCallback} from 'react';
 import {View} from 'react-native';
 import getStyledTextArray from '@libs/GetStyledTextArray';
 import * as StyleUtils from '@styles/StyleUtils';
@@ -57,57 +57,60 @@ function MentionSuggestions({prefix, mentions, highlightedMentionIndex = 0, onSe
     /**
      * Render a suggestion menu item component.
      */
-    const renderSuggestionMenuItem = (item: Mention) => {
-        const isIcon = item.text === CONST.AUTO_COMPLETE_SUGGESTER.HERE_TEXT;
-        const styledDisplayName = getStyledTextArray(item.text, prefix);
-        const styledHandle = item.text === item.alternateText ? undefined : getStyledTextArray(item.alternateText, prefix);
-
-        return (
-            <View style={[styles.autoCompleteSuggestionContainer, styles.ph2]}>
-                <View style={styles.mentionSuggestionsAvatarContainer}>
-                    <Avatar
-                        source={item.icons[0].source}
-                        size={isIcon ? CONST.AVATAR_SIZE.MENTION_ICON : CONST.AVATAR_SIZE.SMALLER}
-                        name={item.icons[0].name}
-                        type={item.icons[0].type}
-                        fill={theme.success}
-                        fallbackIcon={item.icons[0].fallbackIcon}
-                    />
+    const renderSuggestionMenuItem = useCallback(
+        (item: Mention) => {
+            const isIcon = item.text === CONST.AUTO_COMPLETE_SUGGESTER.HERE_TEXT;
+            const styledDisplayName = getStyledTextArray(item.text, prefix);
+            const styledHandle = item.text === item.alternateText ? undefined : getStyledTextArray(item.alternateText, prefix);
+
+            return (
+                <View style={[styles.autoCompleteSuggestionContainer, styles.ph2]}>
+                    <View style={styles.mentionSuggestionsAvatarContainer}>
+                        <Avatar
+                            source={item.icons[0].source}
+                            size={isIcon ? CONST.AVATAR_SIZE.MENTION_ICON : CONST.AVATAR_SIZE.SMALLER}
+                            name={item.icons[0].name}
+                            type={item.icons[0].type}
+                            fill={theme.success}
+                            fallbackIcon={item.icons[0].fallbackIcon}
+                        />
+                    </View>
+                    <Text
+                        style={[styles.mentionSuggestionsText, styles.flexShrink1]}
+                        numberOfLines={1}
+                    >
+                        {styledDisplayName?.map(({text, isColored}, i) => (
+                            <Text
+                                // eslint-disable-next-line react/no-array-index-key
+                                key={`${text}${i}`}
+                                style={[StyleUtils.getColoredBackgroundStyle(theme, isColored), styles.mentionSuggestionsDisplayName]}
+                            >
+                                {text}
+                            </Text>
+                        ))}
+                    </Text>
+                    <Text
+                        style={[styles.mentionSuggestionsText, styles.flex1]}
+                        numberOfLines={1}
+                    >
+                        {styledHandle?.map(
+                            ({text, isColored}, i) =>
+                                Boolean(text) && (
+                                    <Text
+                                        // eslint-disable-next-line react/no-array-index-key
+                                        key={`${text}${i}`}
+                                        style={[StyleUtils.getColoredBackgroundStyle(theme, isColored), styles.mentionSuggestionsHandle]}
+                                    >
+                                        {text}
+                                    </Text>
+                                ),
+                        )}
+                    </Text>
                 </View>
-                <Text
-                    style={[styles.mentionSuggestionsText, styles.flexShrink1]}
-                    numberOfLines={1}
-                >
-                    {styledDisplayName?.map(({text, isColored}, i) => (
-                        <Text
-                            // eslint-disable-next-line react/no-array-index-key
-                            key={`${text}${i}`}
-                            style={[StyleUtils.getColoredBackgroundStyle(theme, isColored), styles.mentionSuggestionsDisplayName]}
-                        >
-                            {text}
-                        </Text>
-                    ))}
-                </Text>
-                <Text
-                    style={[styles.mentionSuggestionsText, styles.flex1]}
-                    numberOfLines={1}
-                >
-                    {styledHandle?.map(
-                        ({text, isColored}, i) =>
-                            Boolean(text) && (
-                                <Text
-                                    // eslint-disable-next-line react/no-array-index-key
-                                    key={`${text}${i}`}
-                                    style={[StyleUtils.getColoredBackgroundStyle(theme, isColored), styles.mentionSuggestionsHandle]}
-                                >
-                                    {text}
-                                </Text>
-                            ),
-                    )}
-                </Text>
-            </View>
-        );
-    };
+            );
+        },
+        [styles, theme, prefix],
+    );
 
     return (
         <AutoCompleteSuggestions