Use "mantine/hooks"

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

@@ -12,7 +12,6 @@ import {
     memo,
     useCallback,
     useEffect,
-    useImperativeHandle,
     useLayoutEffect,
     useMemo,
     useRef,
@@ -21,6 +20,7 @@ import {
 import Stack from '@mui/material/Stack';
 import { useTheme } from '@mui/material/styles';
 import { useLocation } from 'react-router-dom';
+import { useMergedRef } from '@mantine/hooks';
 import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
 import {
     IReaderSettings,
@@ -168,7 +168,7 @@ const BaseReaderViewer = forwardRef(
         };
 
         const scrollElementRef = useRef<HTMLDivElement | null>(null);
-        useImperativeHandle(ref, () => scrollElementRef.current!);
+        const mergedRef = useMergedRef(ref, scrollElementRef);
 
         const isContinuousVerticalReadingModeActive = isContinuousVerticalReadingMode(readingMode);
         const isContinuousReadingModeActive = isContinuousReadingMode(readingMode);
@@ -310,7 +310,7 @@ const BaseReaderViewer = forwardRef(
 
         return (
             <Stack
-                ref={scrollElementRef}
+                ref={mergedRef}
                 sx={{
                     width: '100%',
                     height: '100%',

src/modules/reader/hooks/useReaderPreserveScrollPosition.ts

@@ -6,7 +6,8 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { RefObject, useEffect, useLayoutEffect, useRef } from 'react';
+import { RefObject, useCallback, useEffect, useLayoutEffect, useRef } from 'react';
+import { useWindowEvent } from '@mantine/hooks';
 import {
     ReaderPageScaleMode,
     ReaderStateChapters,
@@ -64,21 +65,18 @@ const usePreserveOnWindowResize = (
 ) => {
     const previousDimensionsRef = useRef({ width: window.innerWidth, height: window.innerHeight });
 
-    useEffect(() => {
-        const handleResize = () => {
-            const { width, height } = previousDimensionsRef.current;
-            previousDimensionsRef.current = { width: window.innerWidth, height: window.innerHeight };
+    const handleResize = useCallback(() => {
+        const { width, height } = previousDimensionsRef.current;
+        previousDimensionsRef.current = { width: window.innerWidth, height: window.innerHeight };
 
-            if (!shouldPreserveOnResizeChange(readingMode, pageScaleMode, width, height)) {
-                return;
-            }
+        if (!shouldPreserveOnResizeChange(readingMode, pageScaleMode, width, height)) {
+            return;
+        }
 
-            setPageToScrollToIndex(pageIndex);
-        };
-
-        window.addEventListener('resize', handleResize);
-        return () => window.removeEventListener('resize', handleResize);
+        setPageToScrollToIndex(pageIndex);
     }, [readingMode, pageScaleMode, pageIndex]);
+
+    useWindowEvent('resize', handleResize);
 };
 
 interface ScrollPreservationInfo {