From 58c402dd0ebd44f577865bdddc6c3d70d3ce8e0c Mon Sep 17 00:00:00 2001 From: schroda <50052685+schroda@users.noreply.github.com> Date: Sun, 22 Dec 2024 00:41:56 +0100 Subject: [PATCH] Memoize components --- src/modules/reader/components/overlay/ReaderOverlay.tsx | 4 ++-- .../reader/components/overlay/ReaderOverlayHeaderMobile.tsx | 3 ++- .../overlay/navigation/desktop/ReaderNavBarDesktop.tsx | 4 ++-- .../desktop/ReaderNavBarDesktopChapterNavigation.tsx | 4 ++-- .../navigation/desktop/ReaderNavBarDesktopPageNavigation.tsx | 4 ++-- .../overlay/navigation/mobile/ReaderBottomBarMobile.tsx | 4 ++-- .../navigation/mobile/ReaderBottomBarMobileQuickSettings.tsx | 3 ++- .../components/overlay/progress-bar/ReaderProgressBar.tsx | 4 ++-- .../progress-bar/variants/MobileReaderProgressBar.tsx | 4 ++-- .../progress-bar/variants/StandardReaderProgressBar.tsx | 3 ++- src/modules/reader/components/viewer/ReaderPage.tsx | 4 ++-- .../reader/components/viewer/ReaderTransitionPage.tsx | 3 ++- src/modules/reader/components/viewer/ReaderViewer.tsx | 3 ++- src/modules/reader/components/viewer/pager/BasePager.tsx | 4 ++-- .../components/viewer/pager/ReaderDoublePagedPager.tsx | 4 ++-- .../reader/components/viewer/pager/ReaderHorizontalPager.tsx | 3 ++- .../reader/components/viewer/pager/ReaderPagedPager.tsx | 5 ++++- .../reader/components/viewer/pager/ReaderVerticalPager.tsx | 3 ++- 18 files changed, 38 insertions(+), 28 deletions(-) diff --git a/src/modules/reader/components/overlay/ReaderOverlay.tsx b/src/modules/reader/components/overlay/ReaderOverlay.tsx index 3042230d..765a956e 100644 --- a/src/modules/reader/components/overlay/ReaderOverlay.tsx +++ b/src/modules/reader/components/overlay/ReaderOverlay.tsx @@ -7,7 +7,7 @@ */ import Box from '@mui/material/Box'; -import { useState } from 'react'; +import { memo, useState } from 'react'; import { BaseReaderOverlayProps, MobileHeaderProps } from '@/modules/reader/types/ReaderOverlay.types.ts'; import { ReaderSettings } from '@/modules/reader/components/settings/ReaderSettings.tsx'; import { ReaderPageNumber } from '@/modules/reader/components/ReaderPageNumber.tsx'; @@ -51,7 +51,7 @@ const BaseReaderOverlay = ({ }; export const ReaderOverlay = withPropsFrom( - BaseReaderOverlay, + memo(BaseReaderOverlay), [ReaderService.useOverlayMode], ['isDesktop', 'isMobile'], ); diff --git a/src/modules/reader/components/overlay/ReaderOverlayHeaderMobile.tsx b/src/modules/reader/components/overlay/ReaderOverlayHeaderMobile.tsx index acc90642..d4045ecc 100644 --- a/src/modules/reader/components/overlay/ReaderOverlayHeaderMobile.tsx +++ b/src/modules/reader/components/overlay/ReaderOverlayHeaderMobile.tsx @@ -22,6 +22,7 @@ import { Link as RouterLink } from 'react-router-dom'; import { alpha } from '@mui/material/styles'; import Tooltip from '@mui/material/Tooltip'; import Slide from '@mui/material/Slide'; +import { memo } from 'react'; import { useGetOptionForDirection } from '@/modules/theme/services/ThemeCreator.ts'; import { TypographyMaxLines } from '@/modules/core/components/TypographyMaxLines.tsx'; import { actionToTranslationKey, ChapterAction, Chapters } from '@/modules/chapter/services/Chapters.ts'; @@ -141,7 +142,7 @@ const BaseReaderOverlayHeaderMobile = ({ }; export const ReaderOverlayHeaderMobile = withPropsFrom( - BaseReaderOverlayHeaderMobile, + memo(BaseReaderOverlayHeaderMobile), [useReaderStateMangaContext, useReaderStateChaptersContext, useReaderScrollbarContext], ['manga', 'currentChapter', 'scrollbarYSize'], ); diff --git a/src/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktop.tsx b/src/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktop.tsx index 18cb2cf4..ec14f202 100644 --- a/src/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktop.tsx +++ b/src/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktop.tsx @@ -14,7 +14,7 @@ import ArrowBack from '@mui/icons-material/ArrowBack'; import ArrowForwardIcon from '@mui/icons-material/ArrowForward'; import PushPinIcon from '@mui/icons-material/PushPin'; import Divider from '@mui/material/Divider'; -import { useCallback, useLayoutEffect, useRef, useState } from 'react'; +import { memo, useCallback, useLayoutEffect, useRef, useState } from 'react'; import Drawer from '@mui/material/Drawer'; import { useGetOptionForDirection } from '@/modules/theme/services/ThemeCreator.ts'; import { ReaderNavBarDesktopProps } from '@/modules/reader/types/ReaderOverlay.types.ts'; @@ -178,7 +178,7 @@ const BaseReaderNavBarDesktop = ({ }; export const ReaderNavBarDesktop = withPropsFrom( - BaseReaderNavBarDesktop, + memo(BaseReaderNavBarDesktop), [ useNavBarContext, useReaderStateMangaContext, diff --git a/src/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktopChapterNavigation.tsx b/src/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktopChapterNavigation.tsx index 4807f35f..8147875b 100644 --- a/src/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktopChapterNavigation.tsx +++ b/src/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktopChapterNavigation.tsx @@ -10,7 +10,7 @@ import Stack from '@mui/material/Stack'; import { useTranslation } from 'react-i18next'; import Box from '@mui/material/Box'; import MenuItem from '@mui/material/MenuItem'; -import { useLayoutEffect } from 'react'; +import { memo, useLayoutEffect } from 'react'; import Popover from '@mui/material/Popover'; import { bindPopover, bindTrigger, usePopupState } from 'material-ui-popup-state/hooks'; import FormControl from '@mui/material/FormControl'; @@ -117,7 +117,7 @@ const BaseReaderNavBarDesktopChapterNavigation = ({ }; export const ReaderNavBarDesktopChapterNavigation = withPropsFrom( - BaseReaderNavBarDesktopChapterNavigation, + memo(BaseReaderNavBarDesktopChapterNavigation), [ () => ({ readerThemeDirection: ReaderService.useGetThemeDirection(), diff --git a/src/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktopPageNavigation.tsx b/src/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktopPageNavigation.tsx index 640f9e68..830f18a4 100644 --- a/src/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktopPageNavigation.tsx +++ b/src/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktopPageNavigation.tsx @@ -9,7 +9,7 @@ import Stack from '@mui/material/Stack'; import { useTranslation } from 'react-i18next'; import MenuItem from '@mui/material/MenuItem'; -import { useMemo } from 'react'; +import { memo, useMemo } from 'react'; import FormControl from '@mui/material/FormControl'; import InputLabel from '@mui/material/InputLabel'; import { Select } from '@/modules/core/components/inputs/Select.tsx'; @@ -80,7 +80,7 @@ const BaseReaderNavBarDesktopPageNavigation = ({ }; export const ReaderNavBarDesktopPageNavigation = withPropsFrom( - BaseReaderNavBarDesktopPageNavigation, + memo(BaseReaderNavBarDesktopPageNavigation), [() => ({ openPage: ReaderControls.useOpenPage() }), ReaderService.useSettingsWithoutDefaultFlag], ['readingDirection', 'openPage'], ); diff --git a/src/modules/reader/components/overlay/navigation/mobile/ReaderBottomBarMobile.tsx b/src/modules/reader/components/overlay/navigation/mobile/ReaderBottomBarMobile.tsx index 3217d843..5d95b6f7 100644 --- a/src/modules/reader/components/overlay/navigation/mobile/ReaderBottomBarMobile.tsx +++ b/src/modules/reader/components/overlay/navigation/mobile/ReaderBottomBarMobile.tsx @@ -18,7 +18,7 @@ import DialogContent from '@mui/material/DialogContent'; import Tooltip from '@mui/material/Tooltip'; import { useTranslation } from 'react-i18next'; import Slide from '@mui/material/Slide'; -import { useLayoutEffect } from 'react'; +import { memo, useLayoutEffect } from 'react'; import { ReaderBottomBarMobileProps } from '@/modules/reader/types/ReaderOverlay.types.ts'; import { MobileReaderProgressBar } from '@/modules/reader/components/overlay/progress-bar/variants/MobileReaderProgressBar.tsx'; import { ReaderChapterList } from '@/modules/reader/components/overlay/navigation/ReaderChapterList.tsx'; @@ -123,7 +123,7 @@ const BaseReaderBottomBarMobile = ({ }; export const ReaderBottomBarMobile = withPropsFrom( - BaseReaderBottomBarMobile, + memo(BaseReaderBottomBarMobile), [useReaderStateChaptersContext, useReaderScrollbarContext], ['currentChapter', 'chapters', 'scrollbarXSize', 'scrollbarYSize'], ); diff --git a/src/modules/reader/components/overlay/navigation/mobile/ReaderBottomBarMobileQuickSettings.tsx b/src/modules/reader/components/overlay/navigation/mobile/ReaderBottomBarMobileQuickSettings.tsx index e3fa5888..bc807480 100644 --- a/src/modules/reader/components/overlay/navigation/mobile/ReaderBottomBarMobileQuickSettings.tsx +++ b/src/modules/reader/components/overlay/navigation/mobile/ReaderBottomBarMobileQuickSettings.tsx @@ -7,6 +7,7 @@ */ import Stack from '@mui/material/Stack'; +import { memo } from 'react'; import { ReaderSettingReadingMode } from '@/modules/reader/components/settings/layout/ReaderSettingReadingMode.tsx'; import { ReaderSettingReadingDirection } from '@/modules/reader/components/settings/layout/ReaderSettingReadingDirection.tsx'; import { ReaderService } from '@/modules/reader/services/ReaderService.ts'; @@ -49,7 +50,7 @@ const BaseReaderBottomBarMobileQuickSettings = ({ }; export const ReaderBottomBarMobileQuickSettings = withPropsFrom( - BaseReaderBottomBarMobileQuickSettings, + memo(BaseReaderBottomBarMobileQuickSettings), [useReaderStateMangaContext, ReaderService.useSettings], ['manga', 'readingMode', 'readingDirection'], ); diff --git a/src/modules/reader/components/overlay/progress-bar/ReaderProgressBar.tsx b/src/modules/reader/components/overlay/progress-bar/ReaderProgressBar.tsx index b2db140e..48dc5e15 100644 --- a/src/modules/reader/components/overlay/progress-bar/ReaderProgressBar.tsx +++ b/src/modules/reader/components/overlay/progress-bar/ReaderProgressBar.tsx @@ -7,7 +7,7 @@ */ import Box, { BoxProps } from '@mui/material/Box'; -import { ReactNode, useCallback, useMemo, useRef } from 'react'; +import { memo, ReactNode, useCallback, useMemo, useRef } from 'react'; import ClickAwayListener from '@mui/material/ClickAwayListener'; import { TypographyProps } from '@mui/material/Typography'; import { StackProps } from '@mui/material/Stack'; @@ -218,7 +218,7 @@ const BaseReaderProgressBar = ({ }; export const ReaderProgressBar = withPropsFrom( - BaseReaderProgressBar, + memo(BaseReaderProgressBar), [ useReaderProgressBarContext, () => ({ openPage: ReaderControls.useOpenPage() }), diff --git a/src/modules/reader/components/overlay/progress-bar/variants/MobileReaderProgressBar.tsx b/src/modules/reader/components/overlay/progress-bar/variants/MobileReaderProgressBar.tsx index 81842d1e..8c6574a7 100644 --- a/src/modules/reader/components/overlay/progress-bar/variants/MobileReaderProgressBar.tsx +++ b/src/modules/reader/components/overlay/progress-bar/variants/MobileReaderProgressBar.tsx @@ -12,7 +12,7 @@ import SkipNextIcon from '@mui/icons-material/SkipNext'; import Stack from '@mui/material/Stack'; import { alpha } from '@mui/material/styles'; import Box from '@mui/material/Box'; -import { useLayoutEffect } from 'react'; +import { memo, useLayoutEffect } from 'react'; import { ReaderProgressBar } from '@/modules/reader/components/overlay/progress-bar/ReaderProgressBar.tsx'; import { ReaderProgressBarSlot } from '@/modules/reader/components/overlay/progress-bar/ReaderProgressBarSlot.tsx'; import { userReaderStatePagesContext } from '@/modules/reader/contexts/state/ReaderStatePagesContext.tsx'; @@ -186,7 +186,7 @@ const BaseMobileReaderProgressBar = ({ }; export const MobileReaderProgressBar = withPropsFrom( - BaseMobileReaderProgressBar, + memo(BaseMobileReaderProgressBar), [useReaderStateChaptersContext, useReaderOverlayContext, useReaderProgressBarContext], ['previousChapter', 'nextChapter', 'isVisible', 'setIsMaximized'], ); diff --git a/src/modules/reader/components/overlay/progress-bar/variants/StandardReaderProgressBar.tsx b/src/modules/reader/components/overlay/progress-bar/variants/StandardReaderProgressBar.tsx index 36564d02..b17cd1c2 100644 --- a/src/modules/reader/components/overlay/progress-bar/variants/StandardReaderProgressBar.tsx +++ b/src/modules/reader/components/overlay/progress-bar/variants/StandardReaderProgressBar.tsx @@ -8,6 +8,7 @@ import { alpha, darken, lighten, useTheme } from '@mui/material/styles'; import Box from '@mui/material/Box'; +import { memo } from 'react'; import { ReaderProgressBar } from '@/modules/reader/components/overlay/progress-bar/ReaderProgressBar.tsx'; import { ReaderProgressBarSlot } from '@/modules/reader/components/overlay/progress-bar/ReaderProgressBarSlot.tsx'; import { userReaderStatePagesContext } from '@/modules/reader/contexts/state/ReaderStatePagesContext.tsx'; @@ -271,7 +272,7 @@ const BaseStandardReaderProgressBar = ({ }; export const StandardReaderProgressBar = withPropsFrom( - BaseStandardReaderProgressBar, + memo(BaseStandardReaderProgressBar), [ useNavBarContext, useReaderProgressBarContext, diff --git a/src/modules/reader/components/viewer/ReaderPage.tsx b/src/modules/reader/components/viewer/ReaderPage.tsx index c087b187..8c097870 100644 --- a/src/modules/reader/components/viewer/ReaderPage.tsx +++ b/src/modules/reader/components/viewer/ReaderPage.tsx @@ -6,7 +6,7 @@ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */ -import { ComponentProps, ForwardedRef, forwardRef } from 'react'; +import { ComponentProps, ForwardedRef, forwardRef, memo } from 'react'; import { SpinnerImage } from '@/modules/core/components/SpinnerImage.tsx'; import { ReaderService } from '@/modules/reader/services/ReaderService.ts'; import { IReaderSettings, ReaderCustomFilter, TReaderScrollbarContext } from '@/modules/reader/types/Reader.types.ts'; @@ -142,7 +142,7 @@ const BaseReaderPage = forwardRef( ); export const ReaderPage = withPropsFrom( - BaseReaderPage, + memo(BaseReaderPage), [ReaderService.useSettingsWithoutDefaultFlag, useReaderScrollbarContext], [ 'readingMode', diff --git a/src/modules/reader/components/viewer/ReaderTransitionPage.tsx b/src/modules/reader/components/viewer/ReaderTransitionPage.tsx index 689ffc00..790849ca 100644 --- a/src/modules/reader/components/viewer/ReaderTransitionPage.tsx +++ b/src/modules/reader/components/viewer/ReaderTransitionPage.tsx @@ -11,6 +11,7 @@ import Stack from '@mui/material/Stack'; import { useTranslation } from 'react-i18next'; import Button from '@mui/material/Button'; import { Link } from 'react-router-dom'; +import { memo } from 'react'; import { useReaderScrollbarContext } from '@/modules/reader/contexts/ReaderScrollbarContext.tsx'; import { useReaderStateChaptersContext } from '@/modules/reader/contexts/state/ReaderStateChaptersContext.tsx'; import { ChapterScanlatorInfo } from '@/modules/chapter/services/Chapters.ts'; @@ -204,7 +205,7 @@ const BaseReaderTransitionPage = ({ }; export const ReaderTransitionPage = withPropsFrom( - BaseReaderTransitionPage, + memo(BaseReaderTransitionPage), [useReaderStateChaptersContext, useReaderScrollbarContext, useNavBarContext], [ 'manga', diff --git a/src/modules/reader/components/viewer/ReaderViewer.tsx b/src/modules/reader/components/viewer/ReaderViewer.tsx index eae2cad6..3c1d9e14 100644 --- a/src/modules/reader/components/viewer/ReaderViewer.tsx +++ b/src/modules/reader/components/viewer/ReaderViewer.tsx @@ -9,6 +9,7 @@ import { ForwardedRef, forwardRef, + memo, useEffect, useImperativeHandle, useLayoutEffect, @@ -337,7 +338,7 @@ const BaseReaderViewer = forwardRef( ); export const ReaderViewer = withPropsFrom( - BaseReaderViewer, + memo(BaseReaderViewer), [ userReaderStatePagesContext, ReaderService.useSettingsWithoutDefaultFlag, diff --git a/src/modules/reader/components/viewer/pager/BasePager.tsx b/src/modules/reader/components/viewer/pager/BasePager.tsx index 7afe23aa..f1051737 100644 --- a/src/modules/reader/components/viewer/pager/BasePager.tsx +++ b/src/modules/reader/components/viewer/pager/BasePager.tsx @@ -6,7 +6,7 @@ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */ -import { ReactNode, useEffect, useMemo, useRef } from 'react'; +import { memo, ReactNode, useEffect, useMemo, useRef } from 'react'; import Box, { BoxProps } from '@mui/material/Box'; import { ReaderService } from '@/modules/reader/services/ReaderService.ts'; import { getImageWidthStyling, getPageIndexesToLoad } from '@/modules/reader/utils/ReaderPager.utils.tsx'; @@ -87,7 +87,7 @@ const BaseBasePager = ({ }; export const BasePager = withPropsFrom( - BaseBasePager, + memo(BaseBasePager), [ReaderService.useSettingsWithoutDefaultFlag], ['readingMode', 'pageScaleMode', 'shouldStretchPage', 'readerWidth', 'imagePreLoadAmount'], ); diff --git a/src/modules/reader/components/viewer/pager/ReaderDoublePagedPager.tsx b/src/modules/reader/components/viewer/pager/ReaderDoublePagedPager.tsx index fe01c3e7..84e7af26 100644 --- a/src/modules/reader/components/viewer/pager/ReaderDoublePagedPager.tsx +++ b/src/modules/reader/components/viewer/pager/ReaderDoublePagedPager.tsx @@ -7,7 +7,7 @@ */ import { Direction, useTheme } from '@mui/material/styles'; -import { Fragment, useMemo } from 'react'; +import { Fragment, memo, useMemo } from 'react'; import { BasePager } from '@/modules/reader/components/viewer/pager/BasePager.tsx'; import { ReaderService } from '@/modules/reader/services/ReaderService.ts'; import { IReaderSettings, ReaderPagerProps, ReadingDirection } from '@/modules/reader/types/Reader.types.ts'; @@ -116,7 +116,7 @@ const BaseReaderDoublePagedPager = ({ }; export const ReaderDoublePagedPager = withPropsFrom( - BaseReaderDoublePagedPager, + memo(BaseReaderDoublePagedPager), [ReaderService.useSettingsWithoutDefaultFlag], ['readingDirection'], ); diff --git a/src/modules/reader/components/viewer/pager/ReaderHorizontalPager.tsx b/src/modules/reader/components/viewer/pager/ReaderHorizontalPager.tsx index f353e12a..3aaa7f93 100644 --- a/src/modules/reader/components/viewer/pager/ReaderHorizontalPager.tsx +++ b/src/modules/reader/components/viewer/pager/ReaderHorizontalPager.tsx @@ -7,6 +7,7 @@ */ import { useTheme } from '@mui/material/styles'; +import { memo } from 'react'; import { ReaderService } from '@/modules/reader/services/ReaderService.ts'; import { BasePager } from '@/modules/reader/components/viewer/pager/BasePager.tsx'; import { applyStyles } from '@/modules/core/utils/ApplyStyles.ts'; @@ -72,7 +73,7 @@ const BaseReaderHorizontalPager = ({ }; export const ReaderHorizontalPager = withPropsFrom( - BaseReaderHorizontalPager, + memo(BaseReaderHorizontalPager), [ReaderService.useSettingsWithoutDefaultFlag], ['pageGap', 'readingDirection'], ); diff --git a/src/modules/reader/components/viewer/pager/ReaderPagedPager.tsx b/src/modules/reader/components/viewer/pager/ReaderPagedPager.tsx index 801ef513..995cc0dd 100644 --- a/src/modules/reader/components/viewer/pager/ReaderPagedPager.tsx +++ b/src/modules/reader/components/viewer/pager/ReaderPagedPager.tsx @@ -6,11 +6,12 @@ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */ +import { memo } from 'react'; import { BasePager } from '@/modules/reader/components/viewer/pager/BasePager.tsx'; import { ReaderPagerProps } from '@/modules/reader/types/Reader.types.ts'; import { createReaderPage } from '@/modules/reader/utils/ReaderPager.utils.tsx'; -export const ReaderPagedPager = ({ +const BaseReaderPagedPager = ({ onLoad, onError, pageLoadStates, @@ -44,3 +45,5 @@ export const ReaderPagedPager = ({ /> ); }; + +export const ReaderPagedPager = memo(BaseReaderPagedPager); diff --git a/src/modules/reader/components/viewer/pager/ReaderVerticalPager.tsx b/src/modules/reader/components/viewer/pager/ReaderVerticalPager.tsx index 7ba9b073..8c200a7c 100644 --- a/src/modules/reader/components/viewer/pager/ReaderVerticalPager.tsx +++ b/src/modules/reader/components/viewer/pager/ReaderVerticalPager.tsx @@ -6,6 +6,7 @@ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */ +import { memo } from 'react'; import { BasePager } from '@/modules/reader/components/viewer/pager/BasePager.tsx'; import { IReaderSettings, ReaderPagerProps, ReadingMode } from '@/modules/reader/types/Reader.types.ts'; import { createReaderPage } from '@/modules/reader/utils/ReaderPager.utils.tsx'; @@ -50,7 +51,7 @@ const BaseReaderVerticalPager = ({ }; export const ReaderVerticalPager = withPropsFrom( - BaseReaderVerticalPager, + memo(BaseReaderVerticalPager), [ReaderService.useSettingsWithoutDefaultFlag], ['pageGap', 'readingMode'], );