[Refactoring] Chat List: Fix redundant DOM operations

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 (

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) {