Memoize components

src/modules/reader/components/overlay/navigation/mobile/ReaderBottomBarMobile.tsx

@@ -18,7 +18,7 @@ import DialogContent from '@mui/material/DialogContent';
 import Tooltip from '@mui/material/Tooltip';
 import { useTranslation } from 'react-i18next';
 import Slide from '@mui/material/Slide';
-import { useLayoutEffect } from 'react';
+import { memo, useLayoutEffect } from 'react';
 import { ReaderBottomBarMobileProps } from '@/modules/reader/types/ReaderOverlay.types.ts';
 import { MobileReaderProgressBar } from '@/modules/reader/components/overlay/progress-bar/variants/MobileReaderProgressBar.tsx';
 import { ReaderChapterList } from '@/modules/reader/components/overlay/navigation/ReaderChapterList.tsx';
@@ -123,7 +123,7 @@ const BaseReaderBottomBarMobile = ({
 };
 
 export const ReaderBottomBarMobile = withPropsFrom(
-    BaseReaderBottomBarMobile,
+    memo(BaseReaderBottomBarMobile),
     [useReaderStateChaptersContext, useReaderScrollbarContext],
     ['currentChapter', 'chapters', 'scrollbarXSize', 'scrollbarYSize'],
 );

src/modules/reader/components/overlay/navigation/mobile/ReaderBottomBarMobileQuickSettings.tsx

@@ -7,6 +7,7 @@
  */
 
 import Stack from '@mui/material/Stack';
+import { memo } from 'react';
 import { ReaderSettingReadingMode } from '@/modules/reader/components/settings/layout/ReaderSettingReadingMode.tsx';
 import { ReaderSettingReadingDirection } from '@/modules/reader/components/settings/layout/ReaderSettingReadingDirection.tsx';
 import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
@@ -49,7 +50,7 @@ const BaseReaderBottomBarMobileQuickSettings = ({
 };
 
 export const ReaderBottomBarMobileQuickSettings = withPropsFrom(
-    BaseReaderBottomBarMobileQuickSettings,
+    memo(BaseReaderBottomBarMobileQuickSettings),
     [useReaderStateMangaContext, ReaderService.useSettings],
     ['manga', 'readingMode', 'readingDirection'],
 );