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.
2025-02-03 15:57:44 +01:00
parent b01b23b069
commit 2ec42d962a
10 changed files with 93 additions and 23 deletions
--- a/src/modules/reader/components/viewer/ReaderChapterViewer.tsx
+++ b/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))) && (
--- a/src/modules/reader/components/viewer/ReaderPage.tsx
+++ b/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(
-    memo(BaseReaderPage),
-    [ReaderService.useSettingsWithoutDefaultFlag, useReaderScrollbarContext, useNavBarContext],
-    [
-        'readingMode',
-        'customFilter',
-        'pageScaleMode',
-        'shouldStretchPage',
-        'readerWidth',
-        'scrollbarXSize',
-        'scrollbarYSize',
-        'readerNavBarWidth',
-    ],
-);
+export const ReaderPage = memo(BaseReaderPage);
--- a/src/modules/reader/components/viewer/ReaderViewer.tsx
+++ b/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',
--- a/src/modules/reader/components/viewer/pager/BasePager.tsx
+++ b/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>
--- a/src/modules/reader/components/viewer/pager/ReaderDoublePagedPager.tsx
+++ b/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,
--- a/src/modules/reader/components/viewer/pager/ReaderHorizontalPager.tsx
+++ b/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,
--- a/src/modules/reader/components/viewer/pager/ReaderPagedPager.tsx
+++ b/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,
                )
            }
--- a/src/modules/reader/components/viewer/pager/ReaderVerticalPager.tsx
+++ b/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,