Reduce rerenders on reader overlay visibility change

src/features/reader/overlay/ReaderOverlay.tsx

@@ -8,7 +8,6 @@
 
 import Box from '@mui/material/Box';
 import { memo, useCallback, useRef, useState } from 'react';
-import { BaseReaderOverlayProps, MobileHeaderProps } from '@/features/reader/overlay/ReaderOverlay.types.ts';
 import { ReaderSettings } from '@/features/reader/settings/screens/ReaderSettings.tsx';
 import { ReaderPageNumber } from '@/features/reader/overlay/components/ReaderPageNumber.tsx';
 import { StandardReaderProgressBar } from '@/features/reader/overlay/progress-bar/desktop/StandardReaderProgressBar.tsx';
@@ -18,14 +17,14 @@ import { ReaderBottomBarMobile } from '@/features/reader/overlay/navigation/mobi
 import { ReaderService } from '@/features/reader/services/ReaderService.ts';
 import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx';
 import { useResizeObserver } from '@/base/hooks/useResizeObserver.tsx';
+import { useReaderOverlayStore } from '@/features/reader/stores/ReaderStore.ts';
 
 const BaseReaderOverlay = ({
-    isVisible,
     isDesktop,
     isMobile,
-}: BaseReaderOverlayProps &
-    MobileHeaderProps &
-    Pick<ReturnType<typeof ReaderService.useOverlayMode>, 'isDesktop' | 'isMobile'>) => {
+}: Pick<ReturnType<typeof ReaderService.useOverlayMode>, 'isDesktop' | 'isMobile'>) => {
+    const isVisible = useReaderOverlayStore((state) => state.overlay.isVisible);
+
     const [areSettingsOpen, setAreSettingsOpen] = useState(false);
 
     const [mobileHeaderHeight, setMobileHeaderHeight] = useState(0);

src/features/reader/screens/Reader.tsx

@@ -36,9 +36,9 @@ import { useAppTitle } from '@/features/navigation-bar/hooks/useAppTitle.ts';
 import { useChapterListOptions } from '@/features/chapter/utils/ChapterList.util.tsx';
 import { FALLBACK_MANGA } from '@/features/manga/Manga.constants.ts';
 import {
+    getReaderOverlayStore,
     getReaderStore,
     useReaderChaptersStore,
-    useReaderOverlayStore,
     useReaderSettingsStore,
     useReaderStore,
     useReaderTapZoneStore,
@@ -52,7 +52,6 @@ const BaseReader = ({
 }: Pick<NavbarContextType, 'setOverride' | 'readerNavBarWidth'>) => {
     const { t } = useTranslation();
     const manga = useReaderStore((state) => state.manga);
-    const overlay = useReaderOverlayStore((state) => state.overlay);
     const { mangaChapters, initialChapter, chapterForDuplicatesHandling, currentChapter } = useReaderChaptersStore(
         (state) => ({
             mangaChapters: state.chapters.mangaChapters,
@@ -160,10 +159,10 @@ const BaseReader = ({
             value: (
                 <Box sx={{ position: 'absolute' }}>
                     <ReaderHotkeys scrollElementRef={scrollElementRef} />
-                    <ReaderOverlay isVisible={overlay.isVisible} />
+                    <ReaderOverlay />
                     {!scrollElementRef.current && (
                         <Box
-                            onClick={() => overlay.setIsVisible(!overlay.isVisible)}
+                            onClick={() => getReaderOverlayStore().setIsVisible(!getReaderOverlayStore().isVisible)}
                             sx={{
                                 position: 'fixed',
                                 top: 0,
@@ -179,7 +178,7 @@ const BaseReader = ({
         });
 
         return () => setOverride({ status: false, value: null });
-    }, [overlay.isVisible, scrollElementRef.current]);
+    }, [scrollElementRef.current]);
 
     if (error) {
         return (