From b2d4f78c6521d2d1170bd8b4bf975cc63f2d4e0a Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Mon, 30 May 2022 15:40:34 +0400
Subject: [PATCH] [Refactoring] Chat List: Fix redundant DOM operations

---
 src/components/left/main/ChatList.tsx | 30 +++++++++++++++------------
 src/util/folderManager.ts             |  4 ++++
 2 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/src/components/left/main/ChatList.tsx b/src/components/left/main/ChatList.tsx
index 9570b86c9..bb248c167 100644
--- a/src/components/left/main/ChatList.tsx
+++ b/src/components/left/main/ChatList.tsx
@@ -13,7 +13,7 @@ import {
 } from '../../../config';
 import { IS_MAC_OS, IS_PWA } from '../../../util/environment';
 import { mapValues } from '../../../util/iteratees';
-import { getPinnedChatsCount } from '../../../util/folderManager';
+import { getPinnedChatsCount, getOrderKey } from '../../../util/folderManager';
 import usePrevious from '../../../hooks/usePrevious';
 import useInfiniteScroll from '../../../hooks/useInfiniteScroll';
 import { useFolderManagerForOrderedIds } from '../../../hooks/useFolderManager';
@@ -117,18 +117,22 @@ const ChatList: FC<OwnProps> = ({
     const viewportOffset = orderedIds!.indexOf(viewportIds![0]);
     const pinnedCount = getPinnedChatsCount(resolvedFolderId) || 0;
 
-    return viewportIds!.map((id, i) => (
-      <Chat
-        key={id}
-        teactOrderKey={i}
-        chatId={id}
-        isPinned={viewportOffset + i < pinnedCount}
-        folderId={folderId}
-        animationType={getAnimationType(id)}
-        orderDiff={orderDiffById[id]}
-        style={`top: ${(viewportOffset + i) * CHAT_HEIGHT_PX}px;`}
-      />
-    ));
+    return viewportIds!.map((id, i) => {
+      const isPinned = viewportOffset + i < pinnedCount;
+
+      return (
+        <Chat
+          key={id}
+          teactOrderKey={isPinned ? i : getOrderKey(id)}
+          chatId={id}
+          isPinned={isPinned}
+          folderId={folderId}
+          animationType={getAnimationType(id)}
+          orderDiff={orderDiffById[id]}
+          style={`top: ${(viewportOffset + i) * CHAT_HEIGHT_PX}px;`}
+        />
+      );
+    });
   }
 
   return (
diff --git a/src/util/folderManager.ts b/src/util/folderManager.ts
index 57b87425a..5192528fd 100644
--- a/src/util/folderManager.ts
+++ b/src/util/folderManager.ts
@@ -135,6 +135,10 @@ export function getAllNotificationsCount() {
   return getUnreadCounters()[ALL_FOLDER_ID]?.notificationsCount || 0;
 }
 
+export function getOrderKey(chatId: string) {
+  return prepared.chatSummariesById.get(chatId)!.order;
+}
+
 /* Callback managers */
 
 export function addOrderedIdsCallback(folderId: number, callback: (orderedIds: string[]) => void) {