Remove context usage from ReaderPage

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

@@ -81,6 +81,11 @@ const BaseReaderChapterViewer = ({
     scrollIntoView,
     setReaderStateChapters,
     resumeMode,
+    customFilter,
+    shouldStretchPage,
+    scrollbarXSize,
+    scrollbarYSize,
+    readerNavBarWidth,
 }: Pick<
     ReaderStatePages,
     | 'currentPageIndex'
@@ -400,6 +405,12 @@ const BaseReaderChapterViewer = ({
                 readingDirection={readingDirection}
                 pageScaleMode={pageScaleMode}
                 pageGap={pageGap}
+                customFilter={customFilter}
+                shouldStretchPage={shouldStretchPage}
+                readerWidth={readerWidth}
+                scrollbarXSize={scrollbarXSize}
+                scrollbarYSize={scrollbarYSize}
+                readerNavBarWidth={readerNavBarWidth}
             />
             {((!isContinuousReadingModeActive && isCurrentChapter) ||
                 (isContinuousReadingModeActive && (isInitialChapter || isTrailingChapter))) && (

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

@@ -8,7 +8,6 @@
 
 import { ComponentProps, memo, useCallback } from 'react';
 import { SpinnerImage } from '@/modules/core/components/SpinnerImage.tsx';
-import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
 import {
     IReaderSettings,
     ReaderCustomFilter,
@@ -21,10 +20,7 @@ import {
     getReaderImageStyling,
 } from '@/modules/reader/utils/ReaderPager.utils.tsx';
 import { applyStyles } from '@/modules/core/utils/ApplyStyles.ts';
-import { useReaderScrollbarContext } from '@/modules/reader/contexts/ReaderScrollbarContext.tsx';
 import { MediaQuery } from '@/modules/core/utils/MediaQuery.tsx';
-import { withPropsFrom } from '@/modules/core/hoc/withPropsFrom.tsx';
-import { useNavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
 import { NavbarContextType } from '@/modules/navigation-bar/NavigationBar.types.ts';
 
 const getCustomFilterString = (customFilter: ReaderCustomFilter): string =>
@@ -171,17 +167,4 @@ const BaseReaderPage = ({
     );
 };
 
-export const ReaderPage = withPropsFrom(
+export const ReaderPage = memo(BaseReaderPage);
-    memo(BaseReaderPage),
-    [ReaderService.useSettingsWithoutDefaultFlag, useReaderScrollbarContext, useNavBarContext],
-    [
-        'readingMode',
-        'customFilter',
-        'pageScaleMode',
-        'shouldStretchPage',
-        'readerWidth',
-        'scrollbarXSize',
-        'scrollbarYSize',
-        'readerNavBarWidth',
-    ],
-);

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

@@ -61,6 +61,8 @@ import {
     getReaderChapterViewResumeMode,
 } from '@/modules/reader/utils/Reader.utils.ts';
 import { noOp } from '@/lib/HelperFunctions.ts';
+import { useNavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
+import { NavbarContextType } from '@/modules/navigation-bar/NavigationBar.types.ts';
 
 const READING_MODE_TO_IN_VIEWPORT_TYPE: Record<ReadingMode, PageInViewportType> = {
     [ReadingMode.SINGLE_PAGE]: PageInViewportType.X,
@@ -92,6 +94,9 @@ const BaseReaderViewer = forwardRef(
             shouldOffsetDoubleSpreads,
             imagePreLoadAmount,
             pageGap,
+            customFilter,
+            shouldStretchPage,
+            readerNavBarWidth,
             setScrollbarXSize,
             setScrollbarYSize,
             isVisible: isOverlayVisible,
@@ -129,8 +134,11 @@ const BaseReaderViewer = forwardRef(
                 | 'shouldOffsetDoubleSpreads'
                 | 'imagePreLoadAmount'
                 | 'pageGap'
+                | 'customFilter'
+                | 'shouldStretchPage'
             > &
             Pick<TReaderScrollbarContext, 'setScrollbarXSize' | 'setScrollbarYSize'> &
+            Pick<NavbarContextType, 'readerNavBarWidth'> &
             Pick<TReaderOverlayContext, 'isVisible' | 'setIsVisible'> &
             Pick<
                 ReaderStateChapters,
@@ -329,6 +337,11 @@ const BaseReaderViewer = forwardRef(
                             setTransitionPageMode={setTransitionPageMode}
                             pageGap={pageGap}
                             imagePreLoadAmount={imagePreLoadAmount}
+                            customFilter={customFilter}
+                            shouldStretchPage={shouldStretchPage}
+                            scrollbarXSize={scrollbarXSize}
+                            scrollbarYSize={scrollbarYSize}
+                            readerNavBarWidth={readerNavBarWidth}
                         />
                     );
                 })}
@@ -347,6 +360,7 @@ export const ReaderViewer = withPropsFrom(
         () => ({ updateCurrentPageIndex: ReaderControls.useUpdateCurrentPageIndex() }),
         useReaderTapZoneContext,
         useReaderStateChaptersContext,
+        useNavBarContext,
     ],
     [
         'currentPageIndex',
@@ -367,6 +381,9 @@ export const ReaderViewer = withPropsFrom(
         'shouldOffsetDoubleSpreads',
         'imagePreLoadAmount',
         'pageGap',
+        'customFilter',
+        'shouldStretchPage',
+        'readerNavBarWidth',
         'transitionPageMode',
         'setScrollbarXSize',
         'setScrollbarYSize',

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

@@ -26,6 +26,13 @@ const BaseBasePager = ({
     isCurrentChapter,
     isPreviousChapter,
     isNextChapter,
+    customFilter,
+    pageScaleMode,
+    shouldStretchPage,
+    readerWidth,
+    scrollbarXSize,
+    scrollbarYSize,
+    readerNavBarWidth,
 }: Omit<ReaderPagerProps, 'pageLoadStates' | 'retryFailedPagesKeyPrefix'> &
     Pick<IReaderSettings, 'readingMode' | 'imagePreLoadAmount'> & {
         createPage: (
@@ -34,6 +41,14 @@ const BaseBasePager = ({
             shouldLoad: boolean,
             shouldDisplay: boolean,
             setRef: (pagesIndex: number, element: HTMLElement | null) => void,
+            readingMode: ReaderPagerProps['readingMode'],
+            customFilter: ReaderPagerProps['customFilter'],
+            pageScaleMode: ReaderPagerProps['pageScaleMode'],
+            shouldStretchPage: ReaderPagerProps['shouldStretchPage'],
+            readerWidth: ReaderPagerProps['readerWidth'],
+            scrollbarXSize: ReaderPagerProps['scrollbarXSize'],
+            scrollbarYSize: ReaderPagerProps['scrollbarYSize'],
+            readerNavBarWidth: ReaderPagerProps['readerNavBarWidth'],
         ) => ReactNode;
         slots?: { boxProps?: BoxProps };
     }) => {
@@ -93,6 +108,14 @@ const BaseBasePager = ({
                     pagesIndexesToRender.includes(pagesIndex),
                     [ReaderTransitionPageMode.NONE, ReaderTransitionPageMode.BOTH].includes(transitionPageMode),
                     setRef,
+                    readingMode,
+                    customFilter,
+                    pageScaleMode,
+                    shouldStretchPage,
+                    readerWidth,
+                    scrollbarXSize,
+                    scrollbarYSize,
+                    readerNavBarWidth,
                 ),
             )}
         </Box>

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

@@ -58,7 +58,7 @@ const BaseReaderDoublePagedPager = ({
     return (
         <BasePager
             {...props}
-            createPage={(page, pagesIndex, shouldLoad, shouldDisplay) => {
+            createPage={(page, pagesIndex, shouldLoad, shouldDisplay, _setRef, ...baseProps) => {
                 const { primary, secondary } = page;
 
                 const currentSecondaryPageIndex = getNextIndexFromPage(currentPage);
@@ -80,6 +80,7 @@ const BaseReaderDoublePagedPager = ({
                             shouldDisplay && isPrimaryPage && shouldLoad,
                             currentPage.primary.index,
                             totalPages,
+                            ...baseProps,
                             pageLoadStates[primary.index].error ? retryFailedPagesKeyPrefix : undefined,
                             hasSecondaryPage ? getPagePosition('first', themeDirection, readingDirection) : undefined,
                             hasSecondaryPage,
@@ -96,6 +97,7 @@ const BaseReaderDoublePagedPager = ({
                                 shouldDisplay && isSecondaryPage && shouldLoad,
                                 currentSecondaryPageIndex,
                                 totalPages,
+                                ...baseProps,
                                 pageLoadStates[secondary.index].error ? retryFailedPagesKeyPrefix : undefined,
                                 getPagePosition('second', themeDirection, readingDirection),
                                 true,

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

@@ -29,7 +29,7 @@ const BaseReaderHorizontalPager = ({
     return (
         <BasePager
             {...props}
-            createPage={(page, pagesIndex, shouldLoad, _, setRef) =>
+            createPage={(page, pagesIndex, shouldLoad, _, setRef, ...baseProps) =>
                 createReaderPage(
                     page,
                     pagesIndex,
@@ -41,6 +41,7 @@ const BaseReaderHorizontalPager = ({
                     true,
                     currentPageIndex,
                     totalPages,
+                    ...baseProps,
                     pageLoadStates[page.primary.index].error ? retryFailedPagesKeyPrefix : undefined,
                     undefined,
                     undefined,

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

@@ -23,7 +23,7 @@ const BaseReaderPagedPager = ({
     return (
         <BasePager
             {...props}
-            createPage={(page, pagesIndex, shouldLoad, shouldDisplay) =>
+            createPage={(page, pagesIndex, shouldLoad, shouldDisplay, _setRef, ...baseProps) =>
                 createReaderPage(
                     page,
                     pagesIndex,
@@ -35,6 +35,7 @@ const BaseReaderPagedPager = ({
                     shouldDisplay && shouldLoad && currentPageIndex === page.primary.index,
                     currentPageIndex,
                     totalPages,
+                    ...baseProps,
                     pageLoadStates[page.primary.index].error ? retryFailedPagesKeyPrefix : undefined,
                 )
             }

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

@@ -26,7 +26,7 @@ const BaseReaderVerticalPager = ({
     return (
         <BasePager
             {...props}
-            createPage={(page, pagesIndex, shouldLoad, _, setRef) =>
+            createPage={(page, pagesIndex, shouldLoad, _, setRef, ...baseProps) =>
                 createReaderPage(
                     page,
                     pagesIndex,
@@ -38,6 +38,7 @@ const BaseReaderVerticalPager = ({
                     true,
                     currentPageIndex,
                     totalPages,
+                    ...baseProps,
                     pageLoadStates[page.primary.index].error ? retryFailedPagesKeyPrefix : undefined,
                     undefined,
                     undefined,

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

@@ -13,6 +13,7 @@ import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
 import { ReaderStatePages } from '@/modules/reader/types/ReaderProgressBar.types.ts';
 import { TMangaReader } from '@/modules/manga/Manga.types.ts';
 import { useAutomaticScrolling } from '@/modules/core/hooks/useAutomaticScrolling.ts';
+import { NavbarContextType } from '@/modules/navigation-bar/NavigationBar.types.ts';
 
 export enum ProgressBarType {
     HIDDEN,
@@ -259,7 +260,19 @@ export interface ReaderPagerProps
             | 'pageLoadStates'
             | 'retryFailedPagesKeyPrefix'
         >,
-        Pick<IReaderSettings, 'readingMode' | 'imagePreLoadAmount' | 'readingDirection' | 'pageScaleMode' | 'pageGap'> {
+        Pick<
+            IReaderSettings,
+            | 'readingMode'
+            | 'imagePreLoadAmount'
+            | 'readingDirection'
+            | 'pageScaleMode'
+            | 'pageGap'
+            | 'customFilter'
+            | 'shouldStretchPage'
+            | 'readerWidth'
+        >,
+        Pick<TReaderScrollbarContext, 'scrollbarXSize' | 'scrollbarYSize'>,
+        Pick<NavbarContextType, 'readerNavBarWidth'> {
     onLoad?: (pagesIndex: number, url: string, isPrimary?: boolean) => void;
     onError?: (pageIndex: number, url: string) => void;
     imageRefs: MutableRefObject<(HTMLElement | null)[]>;

src/modules/reader/utils/ReaderPager.utils.tsx

@@ -16,6 +16,7 @@ import {
     ReaderTransitionPageMode,
     ReadingDirection,
     ReadingMode,
+    TReaderScrollbarContext,
 } from '@/modules/reader/types/Reader.types.ts';
 import { applyStyles } from '@/modules/core/utils/ApplyStyles.ts';
 import {
@@ -33,6 +34,7 @@ import { DirectionOffset } from '@/Base.types.ts';
 import { getOptionForDirection } from '@/modules/theme/services/ThemeCreator.ts';
 import { READING_DIRECTION_TO_THEME_DIRECTION } from '@/modules/reader/constants/ReaderSettings.constants.tsx';
 import { coerceIn } from '@/lib/HelperFunctions.ts';
+import { NavbarContextType } from '@/modules/navigation-bar/NavigationBar.types.ts';
 
 type CSSObject = ReturnType<Theme['applyStyles']>;
 
@@ -292,6 +294,14 @@ export const createReaderPage = (
     display: boolean,
     currentPageIndex: number,
     totalPages: number,
+    readingMode: IReaderSettings['readingMode'],
+    customFilter: IReaderSettings['customFilter'],
+    pageScaleMode: IReaderSettings['pageScaleMode'],
+    shouldStretchPage: IReaderSettings['shouldStretchPage'],
+    readerWidth: IReaderSettings['readerWidth'],
+    scrollbarXSize: TReaderScrollbarContext['scrollbarXSize'],
+    scrollbarYSize: TReaderScrollbarContext['scrollbarYSize'],
+    readerNavBarWidth: NavbarContextType['readerNavBarWidth'],
     retryKeyPrefix?: string,
     position?: 'left' | 'right',
     isDoublePage?: boolean,
@@ -316,6 +326,14 @@ export const createReaderPage = (
         retryKeyPrefix={retryKeyPrefix}
         marginTop={marginTop}
         isLoaded={isLoaded}
+        readingMode={readingMode}
+        customFilter={customFilter}
+        pageScaleMode={pageScaleMode}
+        shouldStretchPage={shouldStretchPage}
+        readerWidth={readerWidth}
+        scrollbarXSize={scrollbarXSize}
+        scrollbarYSize={scrollbarYSize}
+        readerNavBarWidth={readerNavBarWidth}
     />
 );