ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[Perf] Custom Emoji Picker: Avoid redundant renders

Browse Source
This commit is contained in:
Alexander Zinchuk 2023-02-03 03:22:07 +01:00
parent 156b0b09da
commit b07be031a9
1 changed files with 28 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/components/middle/composer/CustomEmojiPicker.tsx
View File

@ -51,9 +51,10 @@ type OwnProps = {
type StateProps = { type StateProps = {
stickerSetsById: Record<string, ApiStickerSet>; stickerSetsById: Record<string, ApiStickerSet>;
addedCustomEmojiIds?: string[]; addedCustomEmojiIds?: string[];
recentCustomEmoji: ApiSticker[]; customEmojisById: Record<string, ApiSticker>;
recentCustomEmojiIds: string[];
defaultTopicIconsId?: string; defaultTopicIconsId?: string;
featuredCustomEmojiIds?: string[]; customEmojiFeaturedIds?: string[];
canAnimate?: boolean; canAnimate?: boolean;
isSavedMessages?: boolean; isSavedMessages?: boolean;
isCurrentUserPremium?: boolean; isCurrentUserPremium?: boolean;
@ -69,9 +70,10 @@ const CustomEmojiPicker: FC<OwnProps & StateProps> = ({
className, className,
loadAndPlay, loadAndPlay,
addedCustomEmojiIds, addedCustomEmojiIds,
recentCustomEmoji, customEmojisById,
recentCustomEmojiIds,
stickerSetsById, stickerSetsById,
featuredCustomEmojiIds, customEmojiFeaturedIds,
canAnimate, canAnimate,
isSavedMessages, isSavedMessages,
isCurrentUserPremium, isCurrentUserPremium,
@ -120,6 +122,10 @@ const CustomEmojiPicker: FC<OwnProps & StateProps> = ({
const areAddedLoaded = Boolean(addedCustomEmojiIds); const areAddedLoaded = Boolean(addedCustomEmojiIds);
const recentCustomEmojis = useMemo(() => {
return Object.values(pickTruthy(customEmojisById, recentCustomEmojiIds));
}, [customEmojisById, recentCustomEmojiIds]);
const allSets = useMemo(() => { const allSets = useMemo(() => {
if (!addedCustomEmojiIds) { if (!addedCustomEmojiIds) {
return MEMO_EMPTY_ARRAY; return MEMO_EMPTY_ARRAY;
@ -136,18 +142,18 @@ const CustomEmojiPicker: FC<OwnProps & StateProps> = ({
title: lang('RecentStickers'), title: lang('RecentStickers'),
}); });
} }
} else if (recentCustomEmoji.length) { } else if (recentCustomEmojis.length) {
defaultSets.push({ defaultSets.push({
id: RECENT_SYMBOL_SET_ID, id: RECENT_SYMBOL_SET_ID,
accessHash: '0', accessHash: '0',
title: lang('RecentStickers'), title: lang('RecentStickers'),
stickers: recentCustomEmoji, stickers: recentCustomEmojis,
count: recentCustomEmoji.length, count: recentCustomEmojis.length,
isEmoji: true as true, isEmoji: true as true,
}); });
} }
const setIdsToDisplay = unique(addedCustomEmojiIds.concat(featuredCustomEmojiIds || [])); const setIdsToDisplay = unique(addedCustomEmojiIds.concat(customEmojiFeaturedIds || []));
const setsToDisplay = Object.values(pickTruthy(stickerSetsById, setIdsToDisplay)); const setsToDisplay = Object.values(pickTruthy(stickerSetsById, setIdsToDisplay));
@ -156,7 +162,7 @@ const CustomEmojiPicker: FC<OwnProps & StateProps> = ({
...setsToDisplay, ...setsToDisplay,
]; ];
}, [ }, [
addedCustomEmojiIds, defaultTopicIconsId, featuredCustomEmojiIds, lang, recentCustomEmoji, stickerSetsById, addedCustomEmojiIds, defaultTopicIconsId, customEmojiFeaturedIds, lang, recentCustomEmojis, stickerSetsById,
withDefaultTopicIcons, withDefaultTopicIcons,
]); ]);
@ -309,21 +315,27 @@ const CustomEmojiPicker: FC<OwnProps & StateProps> = ({
export default memo(withGlobal<OwnProps>( export default memo(withGlobal<OwnProps>(
(global, { chatId }): StateProps => { (global, { chatId }): StateProps => {
const { const {
setsById, stickers: {
} = global.stickers; setsById: stickerSetsById,
},
customEmojis: {
byId: customEmojisById,
featuredIds: customEmojiFeaturedIds,
},
recentCustomEmojis: recentCustomEmojiIds,
} = global;
const isSavedMessages = Boolean(chatId && selectIsChatWithSelf(global, chatId)); const isSavedMessages = Boolean(chatId && selectIsChatWithSelf(global, chatId));
const recentCustomEmoji = Object.values(pickTruthy(global.customEmojis.byId, global.recentCustomEmojis));
return { return {
stickerSetsById: setsById, stickerSetsById,
addedCustomEmojiIds: global.customEmojis.added.setIds, addedCustomEmojiIds: global.customEmojis.added.setIds,
canAnimate: global.settings.byKey.shouldLoopStickers, canAnimate: global.settings.byKey.shouldLoopStickers,
isSavedMessages, isSavedMessages,
isCurrentUserPremium: selectIsCurrentUserPremium(global), isCurrentUserPremium: selectIsCurrentUserPremium(global),
recentCustomEmoji, customEmojisById,
featuredCustomEmojiIds: global.customEmojis.featuredIds, recentCustomEmojiIds,
customEmojiFeaturedIds,
defaultTopicIconsId: global.defaultTopicIconsId, defaultTopicIconsId: global.defaultTopicIconsId,
}; };
}, },