Memoize components

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'],
 );

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'],
 );

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,

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(),

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'],
 );

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'],
 );

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'],
 );

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() }),

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'],
 );

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,

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',

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',

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,

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'],
 );

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'],
 );

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'],
 );

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

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'],
 );