Remove "forwardRef" usage

2025-09-24 00:51:13 +02:00
parent bcb5e391f0
commit a2d7091712
19 changed files with 1055 additions and 1101 deletions
--- a/src/base/components/SpinnerImage.tsx
+++ b/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(
-    (props: SpinnerImageProps, imgRef: ForwardedRef<HTMLImageElement | HTMLDivElement | null>) => {
+export const SpinnerImage = ({ ref, ...props }: SpinnerImageProps) => {
    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(
            )}
        </>
    );
-    },
-);
+};
--- a/src/base/components/buttons/CustomButton.tsx
+++ b/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(
-    <C extends React.ElementType>(
-        { children, ...props }: ButtonProps<C, { component?: C }>,
-        ref: ForwardedRef<HTMLButtonElement | null>,
-    ) => (
-        <Button ref={ref} {...props}>
+export const CustomButton = <C extends React.ElementType>({
+    children,
+    ...props
+}: ButtonProps<C, { component?: C }>) => (
+    <Button {...props}>
        <Stack
            direction="row"
            sx={{
@@ -28,5 +26,4 @@ export const CustomButton = forwardRef(
            {children}
        </Stack>
    </Button>
-    ),
 );
--- a/src/base/components/buttons/CustomButtonIcon.tsx
+++ b/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(
-    <C extends React.ElementType>(
-        { children, ...props }: ButtonProps<C, { component?: C }>,
-        ref: ForwardedRef<HTMLButtonElement | null>,
-    ) => (
+export const CustomButtonIcon = <C extends React.ElementType>({
+    children,
+    ...props
+}: ButtonProps<C, { component?: C }>) => (
    <Button
-            ref={ref}
        {...props}
        sx={{
            minWidth: 'unset',
@@ -25,5 +22,4 @@ export const CustomButtonIcon = forwardRef(
    >
        {children}
    </Button>
-    ),
 );
--- a/src/base/components/feedback/SnackbarWithDescription.tsx
+++ b/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>
        );
    },
-    ),
 );
--- a/src/base/components/menu/IconMenuItem.tsx
+++ b/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>(
-    ({ MenuItemProps, className, label, LeftIcon, renderLabel, RightIcon, ...props }, ref) => (
-        <MenuItem {...MenuItemProps} ref={ref} className={className} {...props}>
+export const IconMenuItem = ({
+    MenuItemProps,
+    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>
-    ),
 );
--- a/src/base/components/menu/NestedMenuItem.tsx
+++ b/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 };
+};
--- a/src/base/components/tabs/TabsMenu.tsx
+++ b/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(
-    ({ children, sx, ...props }: TabsProps, ref: ForwardedRef<HTMLDivElement | null>) => {
+export const TabsMenu = ({ children, sx, ...props }: TabsProps) => {
    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>
    );
-    },
-);
+};
--- a/src/base/hoc/withPropsFrom.tsx
+++ b/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(
-        forwardRef<HTMLElement, Omit<ComponentProps, SourcePropKeys>>((props, ref) => {
+    memo(({ ref, ...props }: Omit<ComponentProps, SourcePropKeys> & { ref?: Ref<HTMLElement> }) => {
        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} />;
-        }),
-    );
+    });
--- a/src/features/manga/components/MangaGrid.tsx
+++ b/src/features/manga/components/MangaGrid.tsx
@@ -6,16 +6,7 @@
 * file, You can obtain one at https://mozilla.org/MPL/2.0/.
 */

-import React, {
-    ForwardedRef,
-    forwardRef,
-    useCallback,
-    useLayoutEffect,
-    useMemo,
-    useRef,
-    useState,
-    type JSX,
-} from 'react';
+import React, { ForwardedRef, Ref, 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: ForwardedRef<HTMLDivElement | null>,
-    ) => (
+    ref,
+}: 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,
-        }: DefaultGridProps & {
+    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
--- a/src/features/manga/components/MangaOptionButton.tsx
+++ b/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>
    );
-    },
-);
+};
--- a/src/features/reader/Reader.types.ts
+++ b/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 {
--- a/src/features/reader/overlay/mobile/ReaderOverlayHeaderMobile.tsx
+++ b/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);
--- a/src/features/reader/overlay/progress-bar/components/ReaderProgressBarDirectionWrapper.tsx
+++ b/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<
-    HTMLElement,
-    BoxProps & {
+const BaseReaderProgressBarDirectionWrapper = ({
+    direction,
+    ...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,
--- a/src/features/reader/viewer/ReaderViewer.tsx
+++ b/src/features/reader/viewer/ReaderViewer.tsx
@@ -6,17 +6,7 @@
 * file, You can obtain one at https://mozilla.org/MPL/2.0/.
 */

-import {
-    ForwardedRef,
-    forwardRef,
-    memo,
-    useCallback,
-    useEffect,
-    useLayoutEffect,
-    useMemo,
-    useRef,
-    useState,
-} from 'react';
+import { ForwardedRef, 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,
-        }: Pick<NavbarContextType, 'readerNavBarWidth'> & {
+    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 } =
-            useReaderChaptersStore((state) => ({
+    const { initialChapter, currentChapter, chapters, visibleChapters, isCurrentChapterReady } = useReaderChaptersStore(
+        (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] ??
-                        chapters[initialChapterIndex + visibleChapters.leading + 1];
+                    chaptersToRender[chapterIndex + 1] ?? chapters[initialChapterIndex + visibleChapters.leading + 1];
                const nextChapter =
-                        chaptersToRender[chapterIndex - 1] ??
-                        chapters[initialChapterIndex - visibleChapters.trailing - 1];
+                    chaptersToRender[chapterIndex - 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 =
-                        visibleChapters.lastTrailingChapterSourceOrder === chapter.sourceOrder;
+                const isLastTrailingChapter = 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),
--- a/src/features/reader/viewer/pager/components/BasePager.tsx
+++ b/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<
-    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 };
-        }
->(
-    (
-        {
+const BaseBasePager = ({
    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) &&
-                            isATransitionPageVisible(transitionPageMode, readingMode),
+                    !isContinuousReadingMode(readingMode) && isATransitionPageVisible(transitionPageMode, readingMode),
                    {
                        visibility: 'hidden',
                        width: 0,
@@ -148,7 +133,6 @@ const BaseBasePager = forwardRef<
            )}
        </Box>
    );
-    },
-);
+};

 export const BasePager = memo(BaseBasePager);
--- a/src/features/reader/viewer/pager/components/ReaderDoublePagedPager.tsx
+++ b/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<
-    HTMLDivElement,
-    ReaderPagerProps & Pick<IReaderSettings, 'readingDirection' | 'pageScaleMode'>
->(({ onLoad, onError, pageLoadStates, retryFailedPagesKeyPrefix, isPreloadMode, ...props }, ref) => {
+const BaseReaderDoublePagedPager = ({
+    onLoad,
+    onError,
+    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);
--- a/src/features/reader/viewer/pager/components/ReaderHorizontalPager.tsx
+++ b/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<
-    HTMLDivElement,
-    ReaderPagerProps & Pick<IReaderSettings, 'pageGap' | 'readingDirection'>
->(({ onLoad, onError, pageLoadStates, retryFailedPagesKeyPrefix, isPreloadMode, ...props }, ref) => {
+const BaseReaderHorizontalPager = ({
+    onLoad,
+    onError,
+    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);
--- a/src/features/reader/viewer/pager/components/ReaderPagedPager.tsx
+++ b/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>(
-    ({ onLoad, onError, pageLoadStates, retryFailedPagesKeyPrefix, isPreloadMode, ...props }, ref) => {
+const BaseReaderPagedPager = ({
+    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);
--- a/src/features/reader/viewer/pager/components/ReaderVerticalPager.tsx
+++ b/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>(
-    ({ onLoad, onError, pageLoadStates, retryFailedPagesKeyPrefix, isPreloadMode, ...props }, ref) => {
+const BaseReaderVerticalPager = ({
+    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);