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/ReaderChapterViewer.tsx

@@ -13,6 +13,7 @@ import { useTranslation } from 'react-i18next';
 import Box from '@mui/material/Box';
 import {
     IReaderSettings,
+    ReaderPagerProps,
     ReaderPageSpreadState,
     ReaderResumeMode,
     ReaderStateChapters,
@@ -62,6 +63,8 @@ const BaseReaderChapterViewer = ({
     pageScaleMode,
     shouldOffsetDoubleSpreads,
     readingDirection,
+    imagePreLoadAmount,
+    pageGap,
     chapterId,
     previousChapterId,
     nextChapterId,
@@ -90,6 +93,7 @@ const BaseReaderChapterViewer = ({
     | 'retryFailedPagesKeyPrefix'
     | 'setTransitionPageMode'
 > &
+    Omit<ReaderPagerProps, 'pages' | 'totalPages' | 'pageLoadStates'> &
     Pick<
         IReaderSettings,
         'readingMode' | 'shouldOffsetDoubleSpreads' | 'readingDirection' | 'readerWidth' | 'pageScaleMode'
@@ -391,6 +395,11 @@ const BaseReaderChapterViewer = ({
                 isCurrentChapter={isCurrentChapter}
                 isPreviousChapter={isPreviousChapter}
                 isNextChapter={isNextChapter}
+                readingMode={readingMode}
+                imagePreLoadAmount={imagePreLoadAmount}
+                readingDirection={readingDirection}
+                pageScaleMode={pageScaleMode}
+                pageGap={pageGap}
             />
             {((!isContinuousReadingModeActive && isCurrentChapter) ||
                 (isContinuousReadingModeActive && (isInitialChapter || isTrailingChapter))) && (

src/modules/reader/components/viewer/ReaderViewer.tsx

@@ -90,6 +90,8 @@ const BaseReaderViewer = forwardRef(
             readerWidth,
             pageScaleMode,
             shouldOffsetDoubleSpreads,
+            imagePreLoadAmount,
+            pageGap,
             setScrollbarXSize,
             setScrollbarYSize,
             isVisible: isOverlayVisible,
@@ -120,7 +122,13 @@ const BaseReaderViewer = forwardRef(
         > &
             Pick<
                 IReaderSettings,
-                'readingMode' | 'readingDirection' | 'readerWidth' | 'pageScaleMode' | 'shouldOffsetDoubleSpreads'
+                | 'readingMode'
+                | 'readingDirection'
+                | 'readerWidth'
+                | 'pageScaleMode'
+                | 'shouldOffsetDoubleSpreads'
+                | 'imagePreLoadAmount'
+                | 'pageGap'
             > &
             Pick<TReaderScrollbarContext, 'setScrollbarXSize' | 'setScrollbarYSize'> &
             Pick<TReaderOverlayContext, 'isVisible' | 'setIsVisible'> &
@@ -319,6 +327,8 @@ const BaseReaderViewer = forwardRef(
                             )}
                             setReaderStateChapters={setReaderStateChapters}
                             setTransitionPageMode={setTransitionPageMode}
+                            pageGap={pageGap}
+                            imagePreLoadAmount={imagePreLoadAmount}
                         />
                     );
                 })}
@@ -355,6 +365,8 @@ export const ReaderViewer = withPropsFrom(
         'readerWidth',
         'pageScaleMode',
         'shouldOffsetDoubleSpreads',
+        'imagePreLoadAmount',
+        'pageGap',
         'transitionPageMode',
         'setScrollbarXSize',
         'setScrollbarYSize',

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(
+export const BasePager = memo(BaseBasePager);
-    memo(BaseBasePager),
-    [ReaderService.useSettingsWithoutDefaultFlag],
-    ['readingMode', 'imagePreLoadAmount'],
-);

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(
+export const ReaderDoublePagedPager = memo(BaseReaderDoublePagedPager);
-    memo(BaseReaderDoublePagedPager),
-    [ReaderService.useSettingsWithoutDefaultFlag],
-    ['readingDirection', 'pageScaleMode'],
-);

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(
+export const ReaderHorizontalPager = memo(BaseReaderHorizontalPager);
-    memo(BaseReaderHorizontalPager),
-    [ReaderService.useSettingsWithoutDefaultFlag],
-    ['pageGap', 'readingDirection'],
-);

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'>) => {
+}: ReaderPagerProps) => {
-    const { currentPageIndex, totalPages } = props;
+    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(
+export const ReaderVerticalPager = memo(BaseReaderVerticalPager);
-    memo(BaseReaderVerticalPager),
-    [ReaderService.useSettingsWithoutDefaultFlag],
-    ['pageGap', 'readingMode'],
-);

src/modules/reader/types/Reader.types.ts

@@ -258,7 +258,8 @@ export interface ReaderPagerProps
             | 'transitionPageMode'
             | 'pageLoadStates'
             | 'retryFailedPagesKeyPrefix'
-    > {
+        >,
+        Pick<IReaderSettings, 'readingMode' | 'imagePreLoadAmount' | 'readingDirection' | 'pageScaleMode' | 'pageGap'> {
     onLoad?: (pagesIndex: number, url: string, isPrimary?: boolean) => void;
     onError?: (pageIndex: number, url: string) => void;
     imageRefs: MutableRefObject<(HTMLElement | null)[]>;

src/modules/reader/utils/ReaderSettings.utils.tsx

@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { ForwardRefExoticComponent, MemoExoticComponent, RefAttributes } from 'react';
+import { ComponentType, MemoExoticComponent } from 'react';
 import {
     IReaderSettings,
     IReaderSettingsWithDefaultFlag,
@@ -59,7 +59,7 @@ export const isAutoWebtoonMode = (
 
 export const getPagerForReadingMode = (
     readingMode: ReadingMode,
-): MemoExoticComponent<ForwardRefExoticComponent<Omit<ReaderPagerProps, never> & RefAttributes<HTMLElement>>> => {
+): MemoExoticComponent<ComponentType<ReaderPagerProps>> => {
     switch (readingMode) {
         case ReadingMode.SINGLE_PAGE:
             return ReaderPagedPager;