From 5ee98fd33cae9623828c268ad93e2c8009a5ea44 Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Sun, 22 Jan 2023 18:12:32 +0100
Subject: [PATCH] [Perf] Memoize some Menu Items

---
 src/components/left/NewChatButton.tsx       |  14 +-
 src/components/left/main/LeftMainHeader.tsx | 202 ++++++++++----------
 src/components/ui/Menu.tsx                  |   4 +-
 3 files changed, 118 insertions(+), 102 deletions(-)

diff --git a/src/components/left/NewChatButton.tsx b/src/components/left/NewChatButton.tsx
index ff0aaae04..95abdca43 100644
--- a/src/components/left/NewChatButton.tsx
+++ b/src/components/left/NewChatButton.tsx
@@ -1,6 +1,6 @@
 import type { FC } from '../../lib/teact/teact';
 import React, {
-  useState, useEffect, memo, useCallback,
+  useState, useEffect, memo, useCallback, useMemo,
 } from '../../lib/teact/teact';
 
 import buildClassName from '../../util/buildClassName';
@@ -49,6 +49,14 @@ const NewChatButton: FC<OwnProps> = ({
     setIsMenuOpen(false);
   }, []);
 
+  const menuItems = useMemo(() => (
+    <>
+      <MenuItem icon="channel" onClick={onNewChannel}>{lang('NewChannel')}</MenuItem>
+      <MenuItem icon="group" onClick={onNewGroup}>{lang('NewGroup')}</MenuItem>
+      <MenuItem icon="user" onClick={onNewPrivateChat}>{lang('NewMessageTitle')}</MenuItem>
+    </>
+  ), [lang, onNewChannel, onNewGroup, onNewPrivateChat]);
+
   return (
     <div className={fabClassName} dir={lang.isRtl ? 'rtl' : undefined}>
       <Button
@@ -69,9 +77,7 @@ const NewChatButton: FC<OwnProps> = ({
         autoClose
         onClose={handleClose}
       >
-        <MenuItem icon="channel" onClick={onNewChannel}>{lang('NewChannel')}</MenuItem>
-        <MenuItem icon="group" onClick={onNewGroup}>{lang('NewGroup')}</MenuItem>
-        <MenuItem icon="user" onClick={onNewPrivateChat}>{lang('NewMessageTitle')}</MenuItem>
+        {menuItems}
       </Menu>
     </div>
   );
diff --git a/src/components/left/main/LeftMainHeader.tsx b/src/components/left/main/LeftMainHeader.tsx
index 614959a92..a6eadd6ac 100644
--- a/src/components/left/main/LeftMainHeader.tsx
+++ b/src/components/left/main/LeftMainHeader.tsx
@@ -266,6 +266,111 @@ const LeftMainHeader: FC<OwnProps & StateProps> = ({
     handleDropdownMenuTransitionEnd,
   } = useLeftHeaderButtonRtlForumTransition(shouldHideSearch);
 
+  const menuItems = useMemo(() => (
+    <>
+      <MenuItem
+        icon="saved-messages"
+        onClick={handleSelectSaved}
+      >
+        {lang('SavedMessages')}
+      </MenuItem>
+      <MenuItem
+        icon="archive"
+        onClick={onSelectArchived}
+      >
+        <span className="menu-item-name">{lang('ArchivedChats')}</span>
+        {archivedUnreadChatsCount > 0 && (
+          <div className="right-badge">{archivedUnreadChatsCount}</div>
+        )}
+      </MenuItem>
+      <MenuItem
+        icon="user"
+        onClick={onSelectContacts}
+      >
+        {lang('Contacts')}
+      </MenuItem>
+      <MenuItem
+        icon="settings"
+        onClick={onSelectSettings}
+      >
+        {lang('Settings')}
+      </MenuItem>
+      <MenuItem
+        icon="darkmode"
+        onClick={handleDarkModeToggle}
+      >
+        <span className="menu-item-name">{lang('lng_menu_night_mode')}</span>
+        <Switcher
+          id="darkmode"
+          label={lang(theme === 'dark' ? 'lng_settings_disable_night_theme' : 'lng_settings_enable_night_theme')}
+          checked={theme === 'dark'}
+          noAnimation
+        />
+      </MenuItem>
+      <MenuItem
+        icon="animations"
+        onClick={handleAnimationLevelChange}
+      >
+        <span className="menu-item-name capitalize">{lang('Appearance.Animations').toLowerCase()}</span>
+        <Switcher
+          id="animations"
+          label="Toggle Animations"
+          checked={animationLevel > 0}
+        />
+      </MenuItem>
+      <MenuItem
+        icon="help"
+        onClick={handleOpenTipsChat}
+      >
+        {lang('TelegramFeatures')}
+      </MenuItem>
+      <MenuItem
+        icon="bug"
+        onClick={handleBugReportClick}
+      >
+        Report Bug
+      </MenuItem>
+      {IS_BETA && (
+        <MenuItem
+          icon="permissions"
+          onClick={handleChangelogClick}
+        >
+          Beta Changelog
+        </MenuItem>
+      )}
+      {withOtherVersions && (
+        <>
+          <MenuItem
+            icon="char-K"
+            href={WEBK_VERSION_URL}
+            onClick={handleSwitchToWebK}
+          >
+            Switch to K Version
+          </MenuItem>
+          <MenuItem
+            icon="char-W"
+            href={LEGACY_VERSION_URL}
+            onClick={handleSwitchToLegacy}
+          >
+            Switch to Old Version
+          </MenuItem>
+        </>
+      )}
+      {canInstall && (
+        <MenuItem
+          icon="install"
+          onClick={getPromptInstall()}
+        >
+          Install App
+        </MenuItem>
+      )}
+    </>
+  ), [
+    animationLevel, archivedUnreadChatsCount, canInstall, handleAnimationLevelChange, handleBugReportClick,
+    handleChangelogClick, handleDarkModeToggle, handleOpenTipsChat, handleSelectSaved, handleSwitchToLegacy,
+    handleSwitchToWebK, lang, onSelectArchived, onSelectContacts, onSelectSettings, theme, withOtherVersions,
+  ]);
+
   return (
     <div className="LeftMainHeader">
       <div id="LeftMainHeader" className="left-header">
@@ -281,102 +386,7 @@ const LeftMainHeader: FC<OwnProps & StateProps> = ({
           positionX={shouldHideSearch && lang.isRtl ? 'right' : 'left'}
           onTransitionEnd={lang.isRtl ? handleDropdownMenuTransitionEnd : undefined}
         >
-          <MenuItem
-            icon="saved-messages"
-            onClick={handleSelectSaved}
-          >
-            {lang('SavedMessages')}
-          </MenuItem>
-          <MenuItem
-            icon="archive"
-            onClick={onSelectArchived}
-          >
-            <span className="menu-item-name">{lang('ArchivedChats')}</span>
-            {archivedUnreadChatsCount > 0 && (
-              <div className="right-badge">{archivedUnreadChatsCount}</div>
-            )}
-          </MenuItem>
-          <MenuItem
-            icon="user"
-            onClick={onSelectContacts}
-          >
-            {lang('Contacts')}
-          </MenuItem>
-          <MenuItem
-            icon="settings"
-            onClick={onSelectSettings}
-          >
-            {lang('Settings')}
-          </MenuItem>
-          <MenuItem
-            icon="darkmode"
-            onClick={handleDarkModeToggle}
-          >
-            <span className="menu-item-name">{lang('lng_menu_night_mode')}</span>
-            <Switcher
-              id="darkmode"
-              label={lang(theme === 'dark' ? 'lng_settings_disable_night_theme' : 'lng_settings_enable_night_theme')}
-              checked={theme === 'dark'}
-              noAnimation
-            />
-          </MenuItem>
-          <MenuItem
-            icon="animations"
-            onClick={handleAnimationLevelChange}
-          >
-            <span className="menu-item-name capitalize">{lang('Appearance.Animations').toLowerCase()}</span>
-            <Switcher
-              id="animations"
-              label="Toggle Animations"
-              checked={animationLevel > 0}
-            />
-          </MenuItem>
-          <MenuItem
-            icon="help"
-            onClick={handleOpenTipsChat}
-          >
-            {lang('TelegramFeatures')}
-          </MenuItem>
-          <MenuItem
-            icon="bug"
-            onClick={handleBugReportClick}
-          >
-            Report Bug
-          </MenuItem>
-          {IS_BETA && (
-            <MenuItem
-              icon="permissions"
-              onClick={handleChangelogClick}
-            >
-              Beta Changelog
-            </MenuItem>
-          )}
-          {withOtherVersions && (
-            <>
-              <MenuItem
-                icon="char-K"
-                href={WEBK_VERSION_URL}
-                onClick={handleSwitchToWebK}
-              >
-                Switch to K Version
-              </MenuItem>
-              <MenuItem
-                icon="char-W"
-                href={LEGACY_VERSION_URL}
-                onClick={handleSwitchToLegacy}
-              >
-                Switch to Old Version
-              </MenuItem>
-            </>
-          )}
-          {canInstall && (
-            <MenuItem
-              icon="install"
-              onClick={getPromptInstall()}
-            >
-              Install App
-            </MenuItem>
-          )}
+          {menuItems}
         </DropdownMenu>
         <SearchInput
           inputId="telegram-search-input"
diff --git a/src/components/ui/Menu.tsx b/src/components/ui/Menu.tsx
index b5ef1639e..2b86df583 100644
--- a/src/components/ui/Menu.tsx
+++ b/src/components/ui/Menu.tsx
@@ -1,6 +1,6 @@
 import type { RefObject } from 'react';
 import type { FC } from '../../lib/teact/teact';
-import React, { useEffect, useRef } from '../../lib/teact/teact';
+import React, { memo, useEffect, useRef } from '../../lib/teact/teact';
 
 import useShowTransition from '../../hooks/useShowTransition';
 import useKeyboardListNavigation from '../../hooks/useKeyboardListNavigation';
@@ -168,4 +168,4 @@ const Menu: FC<OwnProps> = ({
   return menu;
 };
 
-export default Menu;
+export default memo(Menu);