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 ( - - {EmojiUtils.getEmojiCodeWithSkinColor(item, preferredSkinToneIndex)} - - : - {styledTextArray.map(({text, isColored}) => ( - - {text} - - ))} - : - - - ); - }; + return ( + + {EmojiUtils.getEmojiCodeWithSkinColor(item, preferredSkinToneIndex)} + + : + {styledTextArray.map(({text, isColored}) => ( + + {text} + + ))} + : + + + ); + }, + [styles, theme, prefix, preferredSkinToneIndex], + ); return ( { - 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 ( - - - + 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 ( + + + + + + {styledDisplayName?.map(({text, isColored}, i) => ( + + {text} + + ))} + + + {styledHandle?.map( + ({text, isColored}, i) => + Boolean(text) && ( + + {text} + + ), + )} + - - {styledDisplayName?.map(({text, isColored}, i) => ( - - {text} - - ))} - - - {styledHandle?.map( - ({text, isColored}, i) => - Boolean(text) && ( - - {text} - - ), - )} - - - ); - }; + ); + }, + [styles, theme, prefix], + ); return (