From 1e4950c7e3d4a86dc10ad2c69f0e0bc29dcc21d4 Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Fri, 6 Sep 2024 15:42:44 +0200
Subject: [PATCH] [Perf] Story Toggler: Avoid expensive global updates on users
 and chats

---
 src/components/story/StoryToggler.tsx | 19 +++++++------------
 1 file changed, 7 insertions(+), 12 deletions(-)

diff --git a/src/components/story/StoryToggler.tsx b/src/components/story/StoryToggler.tsx
index d0de3aef9..b1940d903 100644
--- a/src/components/story/StoryToggler.tsx
+++ b/src/components/story/StoryToggler.tsx
@@ -1,13 +1,10 @@
 import React, { memo, useEffect, useMemo } from '../../lib/teact/teact';
-import { getActions, withGlobal } from '../../global';
+import { getActions, getGlobal, withGlobal } from '../../global';
 
-import type { ApiChat, ApiUser } from '../../api/types';
 import type { GlobalState } from '../../global/types';
 
 import { ANIMATION_END_DELAY, PREVIEW_AVATAR_COUNT } from '../../config';
-import {
-  selectIsForumPanelOpen, selectPerformanceSettingsValue, selectTabState,
-} from '../../global/selectors';
+import { selectIsForumPanelOpen, selectPerformanceSettingsValue, selectTabState } from '../../global/selectors';
 import buildClassName from '../../util/buildClassName';
 import { animateClosing, animateOpening, ANIMATION_DURATION } from './helpers/ribbonAnimation';
 
@@ -31,8 +28,6 @@ interface StateProps {
   isShown: boolean;
   isForumPanelOpen?: boolean;
   withAnimation?: boolean;
-  usersById: Record<string, ApiUser>;
-  chatsById: Record<string, ApiChat>;
   peerStories: GlobalState['stories']['byPeerId'];
 }
 
@@ -41,8 +36,6 @@ const PRELOAD_PEERS = 5;
 function StoryToggler({
   currentUserId,
   orderedPeerIds,
-  usersById,
-  chatsById,
   canShow,
   isShown,
   isForumPanelOpen,
@@ -55,6 +48,10 @@ function StoryToggler({
   const lang = useOldLang();
 
   const peers = useMemo(() => {
+    // No need for expensive global updates on users, so we avoid them
+    const usersById = getGlobal().users.byId;
+    const chatsById = getGlobal().chats.byId;
+
     if (orderedPeerIds.length === 1) {
       return [usersById[orderedPeerIds[0]] || chatsById[orderedPeerIds[0]]];
     }
@@ -64,7 +61,7 @@ function StoryToggler({
       .filter((peer) => peer && peer.id !== currentUserId)
       .slice(0, PREVIEW_AVATAR_COUNT)
       .reverse();
-  }, [currentUserId, orderedPeerIds, usersById, chatsById]);
+  }, [currentUserId, orderedPeerIds]);
 
   const closeFriends = useMemo(() => {
     if (!peers?.length) return {};
@@ -144,8 +141,6 @@ export default memo(withGlobal<OwnProps>((global, { isArchived }): StateProps =>
     isShown: isArchived ? !isArchivedRibbonShown : !isRibbonShown,
     isForumPanelOpen,
     withAnimation,
-    usersById: global.users.byId,
-    chatsById: global.chats.byId,
     peerStories: byPeerId,
   };
 })(StoryToggler));