Memoize components

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