Remove "forwardRef" usage

src/base/components/SpinnerImage.tsx

@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { useState, useEffect, forwardRef, ForwardedRef, useCallback, useRef } from 'react';
+import { useState, useEffect, useCallback, useRef, Ref } from 'react';
 import CircularProgress from '@mui/material/CircularProgress';
 import Box from '@mui/material/Box';
 import Stack from '@mui/material/Stack';
@@ -41,10 +41,11 @@ export interface SpinnerImageProps {
     priority?: Priority;
 
     retryKeyPrefix?: string;
+
+    ref?: Ref<HTMLImageElement | HTMLDivElement | null>;
 }
 
-export const SpinnerImage = forwardRef(
+export const SpinnerImage = ({ ref, ...props }: SpinnerImageProps) => {
-    (props: SpinnerImageProps, imgRef: ForwardedRef<HTMLImageElement | HTMLDivElement | null>) => {
     const {
         shouldLoad = true,
         shouldDecode,
@@ -148,7 +149,7 @@ export const SpinnerImage = forwardRef(
         <>
             {showMissingImageIcon ? (
                 <Stack
-                        ref={imgRef}
+                    ref={ref}
                     sx={{
                         height: '100%',
                         alignItems: 'center',
@@ -172,7 +173,7 @@ export const SpinnerImage = forwardRef(
                             }),
                         }),
                     ]}
-                        ref={imgRef}
+                    ref={ref}
                     crossOrigin={disableCors ? undefined : 'anonymous'}
                     src={imageSourceUrl}
                     alt={alt}
@@ -221,5 +222,4 @@ export const SpinnerImage = forwardRef(
             )}
         </>
     );
-    },
+};
-);

src/base/components/buttons/CustomButton.tsx

@@ -8,14 +8,12 @@
 
 import Button, { ButtonProps } from '@mui/material/Button';
 import Stack from '@mui/material/Stack';
-import { ForwardedRef, forwardRef } from 'react';
 
-export const CustomButton = forwardRef(
+export const CustomButton = <C extends React.ElementType>({
-    <C extends React.ElementType>(
+    children,
-        { children, ...props }: ButtonProps<C, { component?: C }>,
+    ...props
-        ref: ForwardedRef<HTMLButtonElement | null>,
+}: ButtonProps<C, { component?: C }>) => (
-    ) => (
+    <Button {...props}>
-        <Button ref={ref} {...props}>
         <Stack
             direction="row"
             sx={{
@@ -28,5 +26,4 @@ export const CustomButton = forwardRef(
             {children}
         </Stack>
     </Button>
-    ),
 );

src/base/components/buttons/CustomButtonIcon.tsx

@@ -7,15 +7,12 @@
  */
 
 import Button, { ButtonProps } from '@mui/material/Button';
-import { ForwardedRef, forwardRef } from 'react';
 
-export const CustomButtonIcon = forwardRef(
+export const CustomButtonIcon = <C extends React.ElementType>({
-    <C extends React.ElementType>(
+    children,
-        { children, ...props }: ButtonProps<C, { component?: C }>,
+    ...props
-        ref: ForwardedRef<HTMLButtonElement | null>,
+}: ButtonProps<C, { component?: C }>) => (
-    ) => (
     <Button
-            ref={ref}
         {...props}
         sx={{
             minWidth: 'unset',
@@ -25,5 +22,4 @@ export const CustomButtonIcon = forwardRef(
     >
         {children}
     </Button>
-    ),
 );

src/base/components/feedback/SnackbarWithDescription.tsx

@@ -7,7 +7,7 @@
  */
 
 import { closeSnackbar, CustomContentProps, SnackbarContent, VariantType } from 'notistack';
-import { ForwardedRef, forwardRef, Fragment, memo } from 'react';
+import { ForwardedRef, Fragment, memo } from 'react';
 import Alert from '@mui/material/Alert';
 import AlertTitle from '@mui/material/AlertTitle';
 import Button from '@mui/material/Button';
@@ -30,20 +30,17 @@ const SNACKBAR_VARIANT_TO_TRANSLATION_KEY: Record<VariantType, TranslationKey> =
 };
 
 export const SnackbarWithDescription = memo(
-    forwardRef(
+    ({
-        (
-            {
         id,
         message,
         description,
         variant,
         action,
+        ref,
     }: CustomContentProps & {
-                // eslint-disable-next-line react/no-unused-prop-types
         description?: string;
-            },
+        ref?: ForwardedRef<HTMLDivElement>;
-            ref: ForwardedRef<HTMLDivElement>,
+    }) => {
-        ) => {
         const { t } = useTranslation();
         const theme = useTheme();
 
@@ -113,5 +110,4 @@ export const SnackbarWithDescription = memo(
             </SnackbarContent>
         );
     },
-    ),
 );

src/base/components/menu/IconMenuItem.tsx

@@ -13,7 +13,7 @@
 import ListItemIcon from '@mui/material/ListItemIcon';
 import MenuItem, { MenuItemProps as MuiMenuItemProps } from '@mui/material/MenuItem';
 import { SxProps, Theme } from '@mui/material/styles';
-import React, { forwardRef, RefObject } from 'react';
+import React, { Ref } from 'react';
 
 import { OverridableComponent } from '@mui/material/OverridableComponent';
 import { SvgIconTypeMap } from '@mui/material/SvgIcon';
@@ -27,14 +27,21 @@ type IconMenuItemProps = {
     renderLabel?: () => React.ReactNode;
     LeftIcon?: OverridableComponent<SvgIconTypeMap> & { muiName: string };
     onClick?: (event: React.MouseEvent<HTMLElement>) => void;
-    ref?: RefObject<HTMLLIElement | null>;
+    ref?: Ref<HTMLLIElement | null>;
     RightIcon?: OverridableComponent<SvgIconTypeMap> & { muiName: string };
     sx?: SxProps<Theme>;
 };
 
-export const IconMenuItem = forwardRef<HTMLLIElement, IconMenuItemProps>(
+export const IconMenuItem = ({
-    ({ MenuItemProps, className, label, LeftIcon, renderLabel, RightIcon, ...props }, ref) => (
+    MenuItemProps,
-        <MenuItem {...MenuItemProps} ref={ref} className={className} {...props}>
+    className,
+    label,
+    LeftIcon,
+    renderLabel,
+    RightIcon,
+    ...props
+}: IconMenuItemProps) => (
+    <MenuItem {...MenuItemProps} className={className} {...props}>
         {LeftIcon && (
             <ListItemIcon>
                 <LeftIcon fontSize="small" />
@@ -47,5 +54,4 @@ export const IconMenuItem = forwardRef<HTMLLIElement, IconMenuItemProps>(
             </ListItemIcon>
         )}
     </MenuItem>
-    ),
 );

src/base/components/menu/NestedMenuItem.tsx

@@ -16,7 +16,6 @@ import Menu, { MenuProps as MuiMenuProps } from '@mui/material/Menu';
 import { MenuItemProps as MuiMenuItemProps } from '@mui/material/MenuItem';
 import {
     ElementType,
-    forwardRef,
     HTMLAttributes,
     KeyboardEvent,
     FocusEvent,
@@ -25,6 +24,7 @@ import {
     RefAttributes,
     useRef,
     useState,
+    Ref,
 } from 'react';
 import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
@@ -51,9 +51,10 @@ export type NestedMenuItemProps = Omit<MuiMenuItemProps, 'button'> & {
     ContainerProps?: HTMLAttributes<HTMLElement> & RefAttributes<HTMLElement>;
     MenuProps?: Partial<Omit<MuiMenuProps, 'children'>>;
     button?: true | undefined;
+    ref?: Ref<HTMLLIElement | null>;
 };
 
-const NestedMenuItem = forwardRef<HTMLLIElement | null, NestedMenuItemProps>((props, ref) => {
+export const NestedMenuItem = ({ ref, ...props }: NestedMenuItemProps) => {
     const {
         parentMenuOpen,
         label,
@@ -229,7 +230,4 @@ const NestedMenuItem = forwardRef<HTMLLIElement | null, NestedMenuItemProps>((pr
             </Menu>
         </Box>
     );
-});
+};
-
-NestedMenuItem.displayName = 'NestedMenuItem';
-export { NestedMenuItem };

src/base/components/tabs/TabsMenu.tsx

@@ -8,7 +8,6 @@
 
 import Tabs, { TabsProps } from '@mui/material/Tabs';
 import { styled } from '@mui/material/styles';
-import { ForwardedRef, forwardRef } from 'react';
 import { useNavBarContext } from '@/features/navigation-bar/NavbarContext.tsx';
 
 const StyledTabsMenu = styled(Tabs)(({ theme }) => ({
@@ -24,14 +23,12 @@ const StyledTabsMenu = styled(Tabs)(({ theme }) => ({
     borderColor: theme.palette.divider,
 }));
 
-export const TabsMenu = forwardRef(
+export const TabsMenu = ({ children, sx, ...props }: TabsProps) => {
-    ({ children, sx, ...props }: TabsProps, ref: ForwardedRef<HTMLDivElement | null>) => {
     const { appBarHeight } = useNavBarContext();
 
     return (
         <StyledTabsMenu
             sx={{ ...sx, top: appBarHeight }}
-                ref={ref}
             indicatorColor="primary"
             textColor="primary"
             variant="scrollable"
@@ -42,5 +39,4 @@ export const TabsMenu = forwardRef(
             {children}
         </StyledTabsMenu>
     );
-    },
+};
-);

src/base/hoc/withPropsFrom.tsx

@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { ComponentType, memo, forwardRef } from 'react';
+import { ComponentType, memo, Ref } from 'react';
 
 type PropsSourceCreator<T, Props extends Record<string, any>> = (props: Props) => T;
 
@@ -21,10 +21,12 @@ export const withPropsFrom = <
     },
     sourcePropKeys: SourcePropKeys[],
 ) =>
-    memo(
+    memo(({ ref, ...props }: Omit<ComponentProps, SourcePropKeys> & { ref?: Ref<HTMLElement> }) => {
-        forwardRef<HTMLElement, Omit<ComponentProps, SourcePropKeys>>((props, ref) => {
         const sourceProps = propsSources.reduce(
-                (acc, propsSource) => ({ ...acc, ...propsSource(props as Omit<ComponentProps, SourcePropKeys>) }),
+            (acc, propsSource) => ({
+                ...acc,
+                ...propsSource(props as unknown as Omit<ComponentProps, SourcePropKeys>),
+            }),
             {},
         );
 
@@ -35,5 +37,4 @@ export const withPropsFrom = <
         const combinedProps = { ...props, ...selectedProps } as unknown as ComponentProps;
 
         return <Component {...combinedProps} ref={ref} />;
-        }),
+    });
-    );

src/features/manga/components/MangaGrid.tsx

@@ -6,16 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import React, {
+import React, { ForwardedRef, Ref, useCallback, useLayoutEffect, useMemo, useRef, useState, type JSX } from 'react';
-    ForwardedRef,
-    forwardRef,
-    useCallback,
-    useLayoutEffect,
-    useMemo,
-    useRef,
-    useState,
-    type JSX,
-} from 'react';
 import Grid, { GridTypeMap } from '@mui/material/Grid';
 import Box, { BoxProps } from '@mui/material/Box';
 import { GridItemProps } from 'react-virtuoso';
@@ -33,11 +24,11 @@ import { GridLayout } from '@/base/Base.types.ts';
 import { useMetadataServerSettings } from '@/features/settings/services/ServerSettingsMetadata.ts';
 import { VirtuosoGridPersisted } from '@/lib/virtuoso/Component/VirtuosoGridPersisted.tsx';
 
-const GridContainer = React.forwardRef<HTMLDivElement, GridTypeMap['props']>(({ children, ...props }, ref) => (
+const GridContainer = ({ children, ref, ...props }: GridTypeMap['props'] & { ref?: Ref<HTMLDivElement> }) => (
     <Grid {...props} ref={ref} container spacing={1}>
         {children}
     </Grid>
-));
+);
 
 const GridItemContainerWithDimension = (
     dimensions: number,
@@ -86,11 +77,10 @@ type DefaultGridProps = Pick<MangaCardProps, 'mode'> & {
     isSelectModeActive?: boolean;
     selectedMangaIds?: Required<MangaType['id']>[];
     handleSelection?: SelectableCollectionReturnType<MangaType['id']>['handleSelection'];
+    ref?: ForwardedRef<HTMLDivElement | null>;
 };
 
-const HorizontalGrid = forwardRef(
+const HorizontalGrid = ({
-    (
-        {
     isLoading,
     mangas,
     inLibraryIndicator,
@@ -100,9 +90,8 @@ const HorizontalGrid = forwardRef(
     selectedMangaIds,
     handleSelection,
     mode,
-        }: DefaultGridProps,
+    ref,
-        ref: ForwardedRef<HTMLDivElement | null>,
+}: DefaultGridProps) => (
-    ) => (
     <Grid
         ref={ref}
         container
@@ -132,14 +121,11 @@ const HorizontalGrid = forwardRef(
             ))
         )}
     </Grid>
-    ),
 );
 
 export const MANGA_GRID_SNAPSHOT_KEY = 'MangaGrid-snapshot-location';
 
-const VerticalGrid = forwardRef(
+const VerticalGrid = ({
-    (
-        {
     isLoading,
     mangas,
     inLibraryIndicator,
@@ -151,12 +137,11 @@ const VerticalGrid = forwardRef(
     selectedMangaIds,
     handleSelection,
     mode,
+    ref,
 }: DefaultGridProps & {
     hasNextPage: boolean;
     loadMore: () => void;
-        },
+}) => (
-        ref: ForwardedRef<HTMLDivElement | null>,
-    ) => (
     <>
         <Box ref={ref}>
             <VirtuosoGridPersisted
@@ -194,7 +179,6 @@ const VerticalGrid = forwardRef(
             <div style={{ height: '75px' }} />
         ) : null}
     </>
-    ),
 );
 
 export interface IMangaGridProps

src/features/manga/components/MangaOptionButton.tsx

@@ -7,7 +7,7 @@
  */
 
 import { useTranslation } from 'react-i18next';
-import { BaseSyntheticEvent, ChangeEvent, useMemo, forwardRef, ForwardedRef } from 'react';
+import { BaseSyntheticEvent, ChangeEvent, useMemo, ForwardedRef } from 'react';
 import Button from '@mui/material/Button';
 import Checkbox from '@mui/material/Checkbox';
 import IconButton from '@mui/material/IconButton';
@@ -19,23 +19,21 @@ import { SelectableCollectionReturnType } from '@/features/collection/hooks/useS
 import { MangaType } from '@/lib/graphql/generated/graphql.ts';
 import { MUIUtil } from '@/lib/mui/MUI.util.ts';
 
-export const MangaOptionButton = forwardRef(
+export const MangaOptionButton = ({
-    (
-        {
     id,
     selected,
     handleSelection,
     asCheckbox = false,
     popupState,
+    ref,
 }: {
     id: number;
     selected?: boolean | null;
     handleSelection?: SelectableCollectionReturnType<MangaType['id']>['handleSelection'];
     asCheckbox?: boolean;
     popupState: PopupState;
-        },
+    ref?: ForwardedRef<HTMLButtonElement | null>;
-        ref: ForwardedRef<HTMLButtonElement | null>,
+}) => {
-    ) => {
     const { t } = useTranslation();
 
     const bindTriggerProps = useMemo(() => bindTrigger(popupState), [popupState]);
@@ -108,5 +106,4 @@ export const MangaOptionButton = forwardRef(
             </Button>
         </CustomTooltip>
     );
-    },
+};
-);

src/features/reader/Reader.types.ts

@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { MutableRefObject } from 'react';
+import { MutableRefObject, Ref } from 'react';
 import { TapZoneInvertMode, TapZoneLayouts } from '@/features/reader/tap-zones/TapZoneLayout.types.ts';
 import { TChapterReader } from '@/features/chapter/Chapter.types.ts';
 import { ReaderService } from '@/features/reader/services/ReaderService.ts';
@@ -349,6 +349,7 @@ export interface ReaderPagerProps
     isPreloadMode: boolean;
     resumeMode: ReaderResumeMode;
     handleAsInitialRender: boolean;
+    ref?: Ref<HTMLDivElement>;
 }
 
 export enum PageInViewportType {

src/features/reader/overlay/mobile/ReaderOverlayHeaderMobile.tsx

@@ -17,7 +17,7 @@ import Link from '@mui/material/Link';
 import { Link as RouterLink } from 'react-router-dom';
 import { alpha } from '@mui/material/styles';
 import Slide from '@mui/material/Slide';
-import { forwardRef, memo } from 'react';
+import { memo, Ref } from 'react';
 import { CustomTooltip } from '@/base/components/CustomTooltip.tsx';
 import { TypographyMaxLines } from '@/base/components/texts/TypographyMaxLines.tsx';
 import { makeToast } from '@/base/utils/Toast.ts';
@@ -38,7 +38,7 @@ import {
 
 const DEFAULT_MANGA = { ...FALLBACK_MANGA, title: '' };
 
-const BaseReaderOverlayHeaderMobile = forwardRef<HTMLDivElement, MobileHeaderProps>(({ isVisible }, ref) => {
+const BaseReaderOverlayHeaderMobile = ({ isVisible, ref }: MobileHeaderProps & { ref?: Ref<HTMLDivElement> }) => {
     const { t } = useTranslation();
     const popupState = usePopupState({ popupId: 'reader-overlay-more-menu', variant: 'popover' });
     const currentChapter = useReaderChaptersStore((state) => state.chapters.currentChapter);
@@ -126,6 +126,6 @@ const BaseReaderOverlayHeaderMobile = forwardRef<HTMLDivElement, MobileHeaderPro
             </Stack>
         </Slide>
     );
-});
+};
 
 export const ReaderOverlayHeaderMobile = memo(BaseReaderOverlayHeaderMobile);

src/features/reader/overlay/progress-bar/components/ReaderProgressBarDirectionWrapper.tsx

@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { forwardRef, useMemo } from 'react';
+import { useMemo } from 'react';
 import { CacheProvider } from '@emotion/react';
 import { ThemeProvider } from '@mui/material/styles';
 import Box, { BoxProps } from '@mui/material/Box';
@@ -17,12 +17,12 @@ import { ReaderService } from '@/features/reader/services/ReaderService.ts';
 import { DIRECTION_TO_CACHE } from '@/features/theme/ThemeDirectionCache.ts';
 import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx';
 
-const BaseReaderProgressBarDirectionWrapper = forwardRef<
+const BaseReaderProgressBarDirectionWrapper = ({
-    HTMLElement,
+    direction,
-    BoxProps & {
+    ...boxProps
+}: BoxProps & {
     direction: ReturnType<typeof ReaderService.useGetThemeDirection>;
-    }
+}) => {
->(({ direction, ...boxProps }, ref) => {
     const {
         settings: { customThemes, appTheme, themeMode, shouldUsePureBlackMode },
     } = useMetadataServerSettings();
@@ -35,11 +35,11 @@ const BaseReaderProgressBarDirectionWrapper = forwardRef<
     return (
         <CacheProvider value={DIRECTION_TO_CACHE[direction]}>
             <ThemeProvider theme={readerTheme}>
-                <Box {...boxProps} ref={ref} dir={direction} />
+                <Box {...boxProps} dir={direction} />
             </ThemeProvider>
         </CacheProvider>
     );
-});
+};
 
 export const ReaderProgressBarDirectionWrapper = withPropsFrom(
     BaseReaderProgressBarDirectionWrapper,

src/features/reader/viewer/ReaderViewer.tsx

@@ -6,17 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import {
+import { ForwardedRef, memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
-    ForwardedRef,
-    forwardRef,
-    memo,
-    useCallback,
-    useEffect,
-    useLayoutEffect,
-    useMemo,
-    useRef,
-    useState,
-} from 'react';
 import Stack from '@mui/material/Stack';
 import { useTheme } from '@mui/material/styles';
 import { useLocation } from 'react-router-dom';
@@ -74,17 +64,14 @@ const READING_MODE_TO_IN_VIEWPORT_TYPE: Record<ReadingMode, PageInViewportType>
     [ReadingMode.WEBTOON]: PageInViewportType.Y,
 };
 
-const BaseReaderViewer = forwardRef(
+const BaseReaderViewer = ({
-    (
-        {
     readerNavBarWidth,
     updateCurrentPageIndex,
+    ref,
 }: Pick<NavbarContextType, 'readerNavBarWidth'> & {
     updateCurrentPageIndex: ReturnType<typeof ReaderControls.useUpdateCurrentPageIndex>;
-        },
+    ref?: ForwardedRef<HTMLDivElement | null>;
-
+}) => {
-        ref: ForwardedRef<HTMLDivElement | null>,
-    ) => {
     const { direction: themeDirection } = useTheme();
     const isOverlayVisible = useReaderOverlayStore((state) => state.overlay.isVisible);
     const {
@@ -114,15 +101,16 @@ const BaseReaderViewer = forwardRef(
         retryFailedPagesKeyPrefix: state.pages.retryFailedPagesKeyPrefix,
         setTransitionPageMode: state.pages.setTransitionPageMode,
     }));
-        const { initialChapter, currentChapter, chapters, visibleChapters, isCurrentChapterReady } =
+    const { initialChapter, currentChapter, chapters, visibleChapters, isCurrentChapterReady } = useReaderChaptersStore(
-            useReaderChaptersStore((state) => ({
+        (state) => ({
             initialChapter: state.chapters.initialChapter,
             currentChapter: state.chapters.currentChapter,
             chapters: state.chapters.chapters,
             visibleChapters: state.chapters.visibleChapters,
             setReaderStateChapters: state.chapters.setReaderStateChapters,
             isCurrentChapterReady: state.chapters.isCurrentChapterReady,
-            }));
+        }),
+    );
     const {
         readingMode,
         readingDirection,
@@ -337,11 +325,9 @@ const BaseReaderViewer = forwardRef(
                 const chapter = chaptersToRender[chapterIndex];
 
                 const previousChapter =
-                        chaptersToRender[chapterIndex + 1] ??
+                    chaptersToRender[chapterIndex + 1] ?? chapters[initialChapterIndex + visibleChapters.leading + 1];
-                        chapters[initialChapterIndex + visibleChapters.leading + 1];
                 const nextChapter =
-                        chaptersToRender[chapterIndex - 1] ??
+                    chaptersToRender[chapterIndex - 1] ?? chapters[initialChapterIndex - visibleChapters.trailing - 1];
-                        chapters[initialChapterIndex - visibleChapters.trailing - 1];
 
                 const isInitialChapter = chapter.id === initialChapter.id;
                 const isCurrentChapter = chapter.id === currentChapter.id;
@@ -350,8 +336,7 @@ const BaseReaderViewer = forwardRef(
                 const isLeadingChapter = initialChapter.sourceOrder > chapter.sourceOrder;
                 const isTrailingChapter = initialChapter.sourceOrder < chapter.sourceOrder;
                 const isLastLeadingChapter = visibleChapters.lastLeadingChapterSourceOrder === chapter.sourceOrder;
-                    const isLastTrailingChapter =
+                const isLastTrailingChapter = visibleChapters.lastTrailingChapterSourceOrder === chapter.sourceOrder;
-                        visibleChapters.lastTrailingChapterSourceOrder === chapter.sourceOrder;
                 const isPreloadMode =
                     (isLastLeadingChapter && visibleChapters.isLeadingChapterPreloadMode) ||
                     (isLastTrailingChapter && visibleChapters.isTrailingChapterPreloadMode);
@@ -428,8 +413,7 @@ const BaseReaderViewer = forwardRef(
             })}
         </Stack>
     );
-    },
+};
-);
 
 export const ReaderViewer = withPropsFrom(
     memo(BaseReaderViewer),

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

@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { forwardRef, memo, ReactNode, useCallback, useEffect, useMemo, useRef } from 'react';
+import { memo, ReactNode, useCallback, useEffect, useMemo, useRef } from 'react';
 import Box, { BoxProps } from '@mui/material/Box';
 import { getPageIndexesToLoad, isATransitionPageVisible } from '@/features/reader/viewer/pager/ReaderPager.utils.tsx';
 import {
@@ -22,28 +22,7 @@ import { isContinuousReadingMode } from '@/features/reader/settings/ReaderSettin
 const getPreviousCurrentPageIndex = (resumeMode: ReaderResumeMode): number =>
     resumeMode === ReaderResumeMode.END ? Number.MAX_SAFE_INTEGER : -1;
 
-const BaseBasePager = forwardRef<
+const BaseBasePager = ({
-    HTMLDivElement,
-    Omit<ReaderPagerProps, 'pageLoadStates' | 'retryFailedPagesKeyPrefix' | 'isPreloadMode'> &
-        Pick<IReaderSettings, 'readingMode' | 'imagePreLoadAmount'> & {
-            createPage: (
-                page: ReaderStatePages['pages'][number],
-                pagesIndex: number,
-                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'],
-                readerNavBarWidth: ReaderPagerProps['readerNavBarWidth'],
-            ) => ReactNode;
-            slots?: { boxProps?: BoxProps };
-        }
->(
-    (
-        {
     currentPageIndex,
     pages,
     transitionPageMode,
@@ -62,9 +41,24 @@ const BaseBasePager = forwardRef<
     readerNavBarWidth,
     resumeMode,
     handleAsInitialRender,
-        },
     ref,
-    ) => {
+}: Omit<ReaderPagerProps, 'pageLoadStates' | 'retryFailedPagesKeyPrefix' | 'isPreloadMode'> &
+    Pick<IReaderSettings, 'readingMode' | 'imagePreLoadAmount'> & {
+        createPage: (
+            page: ReaderStatePages['pages'][number],
+            pagesIndex: number,
+            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'],
+            readerNavBarWidth: ReaderPagerProps['readerNavBarWidth'],
+        ) => ReactNode;
+        slots?: { boxProps?: BoxProps };
+    }) => {
     const previousCurrentPageIndex = useRef(getPreviousCurrentPageIndex(resumeMode));
 
     if (handleAsInitialRender) {
@@ -83,15 +77,7 @@ const BaseBasePager = forwardRef<
                 isPreviousChapter,
                 isNextChapter,
             ),
-            [
+        [currentPageIndex, pages, imagePreLoadAmount, readingMode, isCurrentChapter, isPreviousChapter, isNextChapter],
-                currentPageIndex,
-                pages,
-                imagePreLoadAmount,
-                readingMode,
-                isCurrentChapter,
-                isPreviousChapter,
-                isNextChapter,
-            ],
     );
     useEffect(() => {
         if (isCurrentChapter) {
@@ -119,8 +105,7 @@ const BaseBasePager = forwardRef<
                 ...(Array.isArray(slots?.boxProps?.sx) ? (slots?.boxProps?.sx ?? []) : [slots?.boxProps?.sx]),
                 // hide pager, without actually unmounting it to prevent re-renders, while a chapter transition page is taking up the full screen
                 applyStyles(
-                        !isContinuousReadingMode(readingMode) &&
+                    !isContinuousReadingMode(readingMode) && isATransitionPageVisible(transitionPageMode, readingMode),
-                            isATransitionPageVisible(transitionPageMode, readingMode),
                     {
                         visibility: 'hidden',
                         width: 0,
@@ -148,7 +133,6 @@ const BaseBasePager = forwardRef<
             )}
         </Box>
     );
-    },
+};
-);
 
 export const BasePager = memo(BaseBasePager);

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

@@ -7,7 +7,7 @@
  */
 
 import { Direction, useTheme } from '@mui/material/styles';
-import { forwardRef, Fragment, memo, useMemo } from 'react';
+import { Fragment, memo, useMemo } from 'react';
 import { BasePager } from '@/features/reader/viewer/pager/components/BasePager.tsx';
 import {
     IReaderSettings,
@@ -41,10 +41,14 @@ const getPagePosition = (
     return isLtrReadingDirection ? 'right' : 'left';
 };
 
-const BaseReaderDoublePagedPager = forwardRef<
+const BaseReaderDoublePagedPager = ({
-    HTMLDivElement,
+    onLoad,
-    ReaderPagerProps & Pick<IReaderSettings, 'readingDirection' | 'pageScaleMode'>
+    onError,
->(({ onLoad, onError, pageLoadStates, retryFailedPagesKeyPrefix, isPreloadMode, ...props }, ref) => {
+    pageLoadStates,
+    retryFailedPagesKeyPrefix,
+    isPreloadMode,
+    ...props
+}: ReaderPagerProps & Pick<IReaderSettings, 'readingDirection' | 'pageScaleMode'>) => {
     const { currentPageIndex, pages, totalPages, readingDirection, pageScaleMode } = props;
 
     const { direction: themeDirection } = useTheme();
@@ -54,7 +58,6 @@ const BaseReaderDoublePagedPager = forwardRef<
 
     return (
         <BasePager
-            ref={ref}
             {...props}
             createPage={(page, pagesIndex, shouldLoad, shouldDisplay, _setRef, ...baseProps) => {
                 const { primary, secondary } = page;
@@ -129,6 +132,6 @@ const BaseReaderDoublePagedPager = forwardRef<
             }}
         />
     );
-});
+};
 
 export const ReaderDoublePagedPager = memo(BaseReaderDoublePagedPager);

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

@@ -7,16 +7,20 @@
  */
 
 import { useTheme } from '@mui/material/styles';
-import { forwardRef, memo } from 'react';
+import { memo } from 'react';
 import { BasePager } from '@/features/reader/viewer/pager/components/BasePager.tsx';
 import { applyStyles } from '@/base/utils/ApplyStyles.ts';
 import { IReaderSettings, ReaderPagerProps, ReadingDirection } from '@/features/reader/Reader.types.ts';
 import { createReaderPage } from '@/features/reader/viewer/pager/ReaderPager.utils.tsx';
 
-const BaseReaderHorizontalPager = forwardRef<
+const BaseReaderHorizontalPager = ({
-    HTMLDivElement,
+    onLoad,
-    ReaderPagerProps & Pick<IReaderSettings, 'pageGap' | 'readingDirection'>
+    onError,
->(({ onLoad, onError, pageLoadStates, retryFailedPagesKeyPrefix, isPreloadMode, ...props }, ref) => {
+    pageLoadStates,
+    retryFailedPagesKeyPrefix,
+    isPreloadMode,
+    ...props
+}: ReaderPagerProps & Pick<IReaderSettings, 'pageGap' | 'readingDirection'>) => {
     const { currentPageIndex, totalPages, pageGap, readingDirection } = props;
 
     const { direction: themeDirection } = useTheme();
@@ -25,7 +29,6 @@ const BaseReaderHorizontalPager = forwardRef<
 
     return (
         <BasePager
-            ref={ref}
             {...props}
             createPage={(page, pagesIndex, shouldLoad, _, setRef, ...baseProps) =>
                 createReaderPage(
@@ -69,6 +72,6 @@ const BaseReaderHorizontalPager = forwardRef<
             }}
         />
     );
-});
+};
 
 export const ReaderHorizontalPager = memo(BaseReaderHorizontalPager);

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

@@ -6,18 +6,23 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { forwardRef, memo } from 'react';
+import { memo } from 'react';
 import { BasePager } from '@/features/reader/viewer/pager/components/BasePager.tsx';
 import { ReaderPagerProps } from '@/features/reader/Reader.types.ts';
 import { createReaderPage } from '@/features/reader/viewer/pager/ReaderPager.utils.tsx';
 
-const BaseReaderPagedPager = forwardRef<HTMLDivElement, ReaderPagerProps>(
+const BaseReaderPagedPager = ({
-    ({ onLoad, onError, pageLoadStates, retryFailedPagesKeyPrefix, isPreloadMode, ...props }, ref) => {
+    onLoad,
+    onError,
+    pageLoadStates,
+    retryFailedPagesKeyPrefix,
+    isPreloadMode,
+    ...props
+}: ReaderPagerProps) => {
     const { currentPageIndex, totalPages } = props;
 
     return (
         <BasePager
-                ref={ref}
             {...props}
             createPage={(page, pagesIndex, shouldLoad, shouldDisplay, _setRef, ...baseProps) =>
                 createReaderPage(
@@ -45,7 +50,6 @@ const BaseReaderPagedPager = forwardRef<HTMLDivElement, ReaderPagerProps>(
             }}
         />
     );
-    },
+};
-);
 
 export const ReaderPagedPager = memo(BaseReaderPagedPager);

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

@@ -6,13 +6,19 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { forwardRef, memo } from 'react';
+import { memo } from 'react';
 import { BasePager } from '@/features/reader/viewer/pager/components/BasePager.tsx';
 import { ReaderPagerProps, ReadingMode } from '@/features/reader/Reader.types.ts';
 import { createReaderPage } from '@/features/reader/viewer/pager/ReaderPager.utils.tsx';
 
-const BaseReaderVerticalPager = forwardRef<HTMLDivElement, ReaderPagerProps>(
+const BaseReaderVerticalPager = ({
-    ({ onLoad, onError, pageLoadStates, retryFailedPagesKeyPrefix, isPreloadMode, ...props }, ref) => {
+    onLoad,
+    onError,
+    pageLoadStates,
+    retryFailedPagesKeyPrefix,
+    isPreloadMode,
+    ...props
+}: ReaderPagerProps) => {
     const { currentPageIndex, totalPages, readingMode, pageGap } = props;
 
     const isWebtoonMode = readingMode === ReadingMode.WEBTOON;
@@ -20,7 +26,6 @@ const BaseReaderVerticalPager = forwardRef<HTMLDivElement, ReaderPagerProps>(
 
     return (
         <BasePager
-                ref={ref}
             {...props}
             createPage={(page, pagesIndex, shouldLoad, _, setRef, ...baseProps) =>
                 createReaderPage(
@@ -46,7 +51,6 @@ const BaseReaderVerticalPager = forwardRef<HTMLDivElement, ReaderPagerProps>(
             slots={{ boxProps: { sx: { margin: 'auto' } } }}
         />
     );
-    },
+};
-);
 
 export const ReaderVerticalPager = memo(BaseReaderVerticalPager);