Memoize components

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