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

[Perf] Memoize some Menu Items

Browse Source
This commit is contained in:
Alexander Zinchuk 2023-01-22 18:12:32 +01:00
parent c34ef129ec
commit 5ee98fd33c
3 changed files with 118 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/left/NewChatButton.tsx
View File

@ -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>
);

40
src/components/left/main/LeftMainHeader.tsx
View File

@ -266,21 +266,8 @@ const LeftMainHeader: FC<OwnProps & StateProps> = ({
handleDropdownMenuTransitionEnd,
} = useLeftHeaderButtonRtlForumTransition(shouldHideSearch);
return (
<div className="LeftMainHeader">
<div id="LeftMainHeader" className="left-header">
{lang.isRtl && <div className="DropdownMenuFiller" />}
<DropdownMenu
trigger={MainButton}
footer={`${APP_NAME} ${versionString}`}
className={buildClassName(
lang.isRtl && 'rtl',
shouldHideSearch && lang.isRtl && 'right-aligned',
shouldDisableDropdownMenuTransitionRef.current && lang.isRtl && 'disable-transition',
)}
positionX={shouldHideSearch && lang.isRtl ? 'right' : 'left'}
onTransitionEnd={lang.isRtl ? handleDropdownMenuTransitionEnd : undefined}
>
const menuItems = useMemo(() => (
<>
<MenuItem
icon="saved-messages"
onClick={handleSelectSaved}
@ -377,6 +364,29 @@ const LeftMainHeader: FC<OwnProps & StateProps> = ({
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">
{lang.isRtl && <div className="DropdownMenuFiller" />}
<DropdownMenu
trigger={MainButton}
footer={`${APP_NAME} ${versionString}`}
className={buildClassName(
lang.isRtl && 'rtl',
shouldHideSearch && lang.isRtl && 'right-aligned',
shouldDisableDropdownMenuTransitionRef.current && lang.isRtl && 'disable-transition',
)}
positionX={shouldHideSearch && lang.isRtl ? 'right' : 'left'}
onTransitionEnd={lang.isRtl ? handleDropdownMenuTransitionEnd : undefined}
>
{menuItems}
</DropdownMenu>
<SearchInput
inputId="telegram-search-input"

4
src/components/ui/Menu.tsx
View File

@ -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);