Remove context usage from ReaderChapterViewer

In case many chapters are rendered, even just the HOC wrapper component re-render due to the context change increases the render time.

Thus, getting rid of these HOC wrapper re-renders by moving the context usage up to the ReaderViewer decreases the render time.

src/modules/reader/components/viewer/pager/BasePager.tsx

@@ -8,11 +8,9 @@
 
 import { memo, ReactNode, useCallback, useEffect, useMemo, useRef } from 'react';
 import Box, { BoxProps } from '@mui/material/Box';
-import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
 import { getPageIndexesToLoad, isATransitionPageVisible } from '@/modules/reader/utils/ReaderPager.utils.tsx';
 import { ReaderStatePages } from '@/modules/reader/types/ReaderProgressBar.types.ts';
 import { IReaderSettings, ReaderPagerProps, ReaderTransitionPageMode } from '@/modules/reader/types/Reader.types.ts';
-import { withPropsFrom } from '@/modules/core/hoc/withPropsFrom.tsx';
 import { applyStyles } from '@/modules/core/utils/ApplyStyles.ts';
 import { isContinuousReadingMode } from '@/modules/reader/utils/ReaderSettings.utils.tsx';
 
@@ -101,8 +99,4 @@ const BaseBasePager = ({
     );
 };
 
-export const BasePager = withPropsFrom(
-    memo(BaseBasePager),
-    [ReaderService.useSettingsWithoutDefaultFlag],
-    ['readingMode', 'imagePreLoadAmount'],
-);
+export const BasePager = memo(BaseBasePager);

src/modules/reader/components/viewer/pager/ReaderDoublePagedPager.tsx

@@ -9,7 +9,6 @@
 import { Direction, useTheme } from '@mui/material/styles';
 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,
@@ -19,7 +18,6 @@ import {
 import { applyStyles } from '@/modules/core/utils/ApplyStyles.ts';
 import { createReaderPage } from '@/modules/reader/utils/ReaderPager.utils.tsx';
 import { getNextIndexFromPage, getPage } from '@/modules/reader/utils/ReaderProgressBar.utils.tsx';
-import { withPropsFrom } from '@/modules/core/hoc/withPropsFrom.tsx';
 
 const getPagePosition = (
     pageType: 'first' | 'second',
@@ -48,11 +46,9 @@ const BaseReaderDoublePagedPager = ({
     onError,
     pageLoadStates,
     retryFailedPagesKeyPrefix,
-    readingDirection,
-    pageScaleMode,
     ...props
 }: ReaderPagerProps & Pick<IReaderSettings, 'readingDirection' | 'pageScaleMode'>) => {
-    const { currentPageIndex, pages, totalPages } = props;
+    const { currentPageIndex, pages, totalPages, readingDirection, pageScaleMode } = props;
 
     const { direction: themeDirection } = useTheme();
 
@@ -133,8 +129,4 @@ const BaseReaderDoublePagedPager = ({
     );
 };
 
-export const ReaderDoublePagedPager = withPropsFrom(
-    memo(BaseReaderDoublePagedPager),
-    [ReaderService.useSettingsWithoutDefaultFlag],
-    ['readingDirection', 'pageScaleMode'],
-);
+export const ReaderDoublePagedPager = memo(BaseReaderDoublePagedPager);

src/modules/reader/components/viewer/pager/ReaderHorizontalPager.tsx

@@ -8,23 +8,19 @@
 
 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';
 import { IReaderSettings, ReaderPagerProps, ReadingDirection } from '@/modules/reader/types/Reader.types.ts';
 import { createReaderPage } from '@/modules/reader/utils/ReaderPager.utils.tsx';
-import { withPropsFrom } from '@/modules/core/hoc/withPropsFrom.tsx';
 
 const BaseReaderHorizontalPager = ({
     onLoad,
     onError,
     pageLoadStates,
     retryFailedPagesKeyPrefix,
-    pageGap,
-    readingDirection,
     ...props
 }: ReaderPagerProps & Pick<IReaderSettings, 'pageGap' | 'readingDirection'>) => {
-    const { currentPageIndex, totalPages } = props;
+    const { currentPageIndex, totalPages, pageGap, readingDirection } = props;
 
     const { direction: themeDirection } = useTheme();
 
@@ -75,8 +71,4 @@ const BaseReaderHorizontalPager = ({
     );
 };
 
-export const ReaderHorizontalPager = withPropsFrom(
-    memo(BaseReaderHorizontalPager),
-    [ReaderService.useSettingsWithoutDefaultFlag],
-    ['pageGap', 'readingDirection'],
-);
+export const ReaderHorizontalPager = memo(BaseReaderHorizontalPager);

src/modules/reader/components/viewer/pager/ReaderPagedPager.tsx

@@ -10,7 +10,6 @@ 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';
-import { withPropsFrom } from '@/modules/core/hoc/withPropsFrom';
 
 const BaseReaderPagedPager = ({
     onLoad,
@@ -50,4 +49,4 @@ const BaseReaderPagedPager = ({
     );
 };
 
-export const ReaderPagedPager = withPropsFrom(memo(BaseReaderPagedPager), [], []);
+export const ReaderPagedPager = memo(BaseReaderPagedPager);

src/modules/reader/components/viewer/pager/ReaderVerticalPager.tsx

@@ -8,21 +8,17 @@
 
 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 { ReaderPagerProps, ReadingMode } from '@/modules/reader/types/Reader.types.ts';
 import { createReaderPage } from '@/modules/reader/utils/ReaderPager.utils.tsx';
-import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
-import { withPropsFrom } from '@/modules/core/hoc/withPropsFrom.tsx';
 
 const BaseReaderVerticalPager = ({
     onLoad,
     onError,
     pageLoadStates,
     retryFailedPagesKeyPrefix,
-    readingMode,
-    pageGap,
     ...props
-}: ReaderPagerProps & Pick<IReaderSettings, 'pageGap' | 'readingMode'>) => {
-    const { currentPageIndex, totalPages } = props;
+}: ReaderPagerProps) => {
+    const { currentPageIndex, totalPages, readingMode, pageGap } = props;
 
     const isWebtoonMode = readingMode === ReadingMode.WEBTOON;
     const actualPageGap = isWebtoonMode ? 0 : pageGap;
@@ -54,8 +50,4 @@ const BaseReaderVerticalPager = ({
     );
 };
 
-export const ReaderVerticalPager = withPropsFrom(
-    memo(BaseReaderVerticalPager),
-    [ReaderService.useSettingsWithoutDefaultFlag],
-    ['pageGap', 'readingMode'],
-);
+export const ReaderVerticalPager = memo(BaseReaderVerticalPager);