Improve memoization of page rendering

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 { memo, ReactNode, useEffect, useMemo, useRef } from 'react';
+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 { getImageWidthStyling, getPageIndexesToLoad } from '@/modules/reader/utils/ReaderPager.utils.tsx';
@@ -37,7 +37,7 @@ const BaseBasePager = ({
             pagesIndex: number,
             shouldLoad: boolean,
             shouldDisplay: boolean,
-            setRef: (element: HTMLElement | null) => void,
+            setRef: (pagesIndex: number, element: HTMLElement | null) => void,
         ) => ReactNode;
         slots?: { boxProps?: BoxProps };
     }) => {
@@ -50,6 +50,14 @@ const BaseBasePager = ({
         previousCurrentPageIndex.current = currentPageIndex;
     }, [pagesIndexesToRender]);
 
+    const setRef = useCallback(
+        (pagesIndex: number, element: HTMLElement | null) => {
+            // eslint-disable-next-line no-param-reassign
+            imageRefs.current[pagesIndex] = element;
+        },
+        [imageRefs],
+    );
+
     return (
         <Box
             {...slots?.boxProps}
@@ -70,10 +78,7 @@ const BaseBasePager = ({
                     pagesIndex,
                     pagesIndexesToRender.includes(pagesIndex),
                     [ReaderTransitionPageMode.NONE, ReaderTransitionPageMode.BOTH].includes(transitionPageMode),
-                    (element) => {
-                        // eslint-disable-next-line no-param-reassign
-                        imageRefs.current[pagesIndex] = element;
-                    },
+                    setRef,
                 ),
             )}
             <ReaderTransitionPage

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

@@ -69,8 +69,10 @@ const BaseReaderDoublePagedPager = ({
                     <Fragment key={`${primary.url}_${secondary?.url}`}>
                         {createReaderPage(
                             page,
-                            () => onLoad?.(pagesIndex),
-                            () => onError?.(primary.index),
+                            pagesIndex,
+                            true,
+                            onLoad,
+                            onError,
                             shouldLoad,
                             shouldDisplay && isPrimaryPage,
                             currentPage.primary.index,
@@ -82,8 +84,10 @@ const BaseReaderDoublePagedPager = ({
                         {hasSecondaryPage &&
                             createReaderPage(
                                 { ...page, primary: { ...page.secondary! } },
-                                () => onLoad?.(pagesIndex, false),
-                                () => onError?.(secondary.index),
+                                pagesIndex,
+                                false,
+                                onLoad,
+                                onError,
                                 shouldLoad,
                                 shouldDisplay && isSecondaryPage,
                                 currentSecondaryPageIndex,

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

@@ -36,8 +36,10 @@ const BaseReaderHorizontalPager = ({
             createPage={(page, pagesIndex, shouldLoad, _, setRef) =>
                 createReaderPage(
                     page,
-                    () => onLoad?.(pagesIndex),
-                    () => onError?.(page.primary.index),
+                    pagesIndex,
+                    true,
+                    onLoad,
+                    onError,
                     shouldLoad,
                     true,
                     currentPageIndex,

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

@@ -26,8 +26,10 @@ const BaseReaderPagedPager = ({
             createPage={(page, pagesIndex, shouldLoad, shouldDisplay) =>
                 createReaderPage(
                     page,
-                    () => onLoad?.(pagesIndex),
-                    () => onError?.(page.primary.index),
+                    pagesIndex,
+                    true,
+                    onLoad,
+                    onError,
                     shouldLoad,
                     shouldDisplay && currentPageIndex === page.primary.index,
                     currentPageIndex,

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

@@ -33,8 +33,10 @@ const BaseReaderVerticalPager = ({
             createPage={(page, pagesIndex, shouldLoad, _, setRef) =>
                 createReaderPage(
                     page,
-                    () => onLoad?.(pagesIndex),
-                    () => onError?.(page.primary.index),
+                    pagesIndex,
+                    true,
+                    onLoad,
+                    onError,
                     shouldLoad,
                     true,
                     currentPageIndex,