Memoize components

src/modules/reader/components/overlay/ReaderOverlay.tsx

@@ -7,7 +7,7 @@
  */
 
 import Box from '@mui/material/Box';
-import { useState } from 'react';
+import { memo, useState } from 'react';
 import { BaseReaderOverlayProps, MobileHeaderProps } from '@/modules/reader/types/ReaderOverlay.types.ts';
 import { ReaderSettings } from '@/modules/reader/components/settings/ReaderSettings.tsx';
 import { ReaderPageNumber } from '@/modules/reader/components/ReaderPageNumber.tsx';
@@ -51,7 +51,7 @@ const BaseReaderOverlay = ({
 };
 
 export const ReaderOverlay = withPropsFrom(
-    BaseReaderOverlay,
+    memo(BaseReaderOverlay),
     [ReaderService.useOverlayMode],
     ['isDesktop', 'isMobile'],
 );

src/modules/reader/components/overlay/ReaderOverlayHeaderMobile.tsx

@@ -22,6 +22,7 @@ import { Link as RouterLink } from 'react-router-dom';
 import { alpha } from '@mui/material/styles';
 import Tooltip from '@mui/material/Tooltip';
 import Slide from '@mui/material/Slide';
+import { memo } from 'react';
 import { useGetOptionForDirection } from '@/modules/theme/services/ThemeCreator.ts';
 import { TypographyMaxLines } from '@/modules/core/components/TypographyMaxLines.tsx';
 import { actionToTranslationKey, ChapterAction, Chapters } from '@/modules/chapter/services/Chapters.ts';
@@ -141,7 +142,7 @@ const BaseReaderOverlayHeaderMobile = ({
 };
 
 export const ReaderOverlayHeaderMobile = withPropsFrom(
-    BaseReaderOverlayHeaderMobile,
+    memo(BaseReaderOverlayHeaderMobile),
     [useReaderStateMangaContext, useReaderStateChaptersContext, useReaderScrollbarContext],
     ['manga', 'currentChapter', 'scrollbarYSize'],
 );

src/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktop.tsx

@@ -14,7 +14,7 @@ import ArrowBack from '@mui/icons-material/ArrowBack';
 import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
 import PushPinIcon from '@mui/icons-material/PushPin';
 import Divider from '@mui/material/Divider';
-import { useCallback, useLayoutEffect, useRef, useState } from 'react';
+import { memo, useCallback, useLayoutEffect, useRef, useState } from 'react';
 import Drawer from '@mui/material/Drawer';
 import { useGetOptionForDirection } from '@/modules/theme/services/ThemeCreator.ts';
 import { ReaderNavBarDesktopProps } from '@/modules/reader/types/ReaderOverlay.types.ts';
@@ -178,7 +178,7 @@ const BaseReaderNavBarDesktop = ({
 };
 
 export const ReaderNavBarDesktop = withPropsFrom(
-    BaseReaderNavBarDesktop,
+    memo(BaseReaderNavBarDesktop),
     [
         useNavBarContext,
         useReaderStateMangaContext,

src/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktopChapterNavigation.tsx

@@ -10,7 +10,7 @@ import Stack from '@mui/material/Stack';
 import { useTranslation } from 'react-i18next';
 import Box from '@mui/material/Box';
 import MenuItem from '@mui/material/MenuItem';
-import { useLayoutEffect } from 'react';
+import { memo, useLayoutEffect } from 'react';
 import Popover from '@mui/material/Popover';
 import { bindPopover, bindTrigger, usePopupState } from 'material-ui-popup-state/hooks';
 import FormControl from '@mui/material/FormControl';
@@ -117,7 +117,7 @@ const BaseReaderNavBarDesktopChapterNavigation = ({
 };
 
 export const ReaderNavBarDesktopChapterNavigation = withPropsFrom(
-    BaseReaderNavBarDesktopChapterNavigation,
+    memo(BaseReaderNavBarDesktopChapterNavigation),
     [
         () => ({
             readerThemeDirection: ReaderService.useGetThemeDirection(),

src/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktopPageNavigation.tsx

@@ -9,7 +9,7 @@
 import Stack from '@mui/material/Stack';
 import { useTranslation } from 'react-i18next';
 import MenuItem from '@mui/material/MenuItem';
-import { useMemo } from 'react';
+import { memo, useMemo } from 'react';
 import FormControl from '@mui/material/FormControl';
 import InputLabel from '@mui/material/InputLabel';
 import { Select } from '@/modules/core/components/inputs/Select.tsx';
@@ -80,7 +80,7 @@ const BaseReaderNavBarDesktopPageNavigation = ({
 };
 
 export const ReaderNavBarDesktopPageNavigation = withPropsFrom(
-    BaseReaderNavBarDesktopPageNavigation,
+    memo(BaseReaderNavBarDesktopPageNavigation),
     [() => ({ openPage: ReaderControls.useOpenPage() }), ReaderService.useSettingsWithoutDefaultFlag],
     ['readingDirection', 'openPage'],
 );

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'],
 );

src/modules/reader/components/overlay/progress-bar/ReaderProgressBar.tsx

@@ -7,7 +7,7 @@
  */
 
 import Box, { BoxProps } from '@mui/material/Box';
-import { ReactNode, useCallback, useMemo, useRef } from 'react';
+import { memo, ReactNode, useCallback, useMemo, useRef } from 'react';
 import ClickAwayListener from '@mui/material/ClickAwayListener';
 import { TypographyProps } from '@mui/material/Typography';
 import { StackProps } from '@mui/material/Stack';
@@ -218,7 +218,7 @@ const BaseReaderProgressBar = ({
 };
 
 export const ReaderProgressBar = withPropsFrom(
-    BaseReaderProgressBar,
+    memo(BaseReaderProgressBar),
     [
         useReaderProgressBarContext,
         () => ({ openPage: ReaderControls.useOpenPage() }),

src/modules/reader/components/overlay/progress-bar/variants/MobileReaderProgressBar.tsx

@@ -12,7 +12,7 @@ import SkipNextIcon from '@mui/icons-material/SkipNext';
 import Stack from '@mui/material/Stack';
 import { alpha } from '@mui/material/styles';
 import Box from '@mui/material/Box';
-import { useLayoutEffect } from 'react';
+import { memo, useLayoutEffect } from 'react';
 import { ReaderProgressBar } from '@/modules/reader/components/overlay/progress-bar/ReaderProgressBar.tsx';
 import { ReaderProgressBarSlot } from '@/modules/reader/components/overlay/progress-bar/ReaderProgressBarSlot.tsx';
 import { userReaderStatePagesContext } from '@/modules/reader/contexts/state/ReaderStatePagesContext.tsx';
@@ -186,7 +186,7 @@ const BaseMobileReaderProgressBar = ({
 };
 
 export const MobileReaderProgressBar = withPropsFrom(
-    BaseMobileReaderProgressBar,
+    memo(BaseMobileReaderProgressBar),
     [useReaderStateChaptersContext, useReaderOverlayContext, useReaderProgressBarContext],
     ['previousChapter', 'nextChapter', 'isVisible', 'setIsMaximized'],
 );

src/modules/reader/components/overlay/progress-bar/variants/StandardReaderProgressBar.tsx

@@ -8,6 +8,7 @@
 
 import { alpha, darken, lighten, useTheme } from '@mui/material/styles';
 import Box from '@mui/material/Box';
+import { memo } from 'react';
 import { ReaderProgressBar } from '@/modules/reader/components/overlay/progress-bar/ReaderProgressBar.tsx';
 import { ReaderProgressBarSlot } from '@/modules/reader/components/overlay/progress-bar/ReaderProgressBarSlot.tsx';
 import { userReaderStatePagesContext } from '@/modules/reader/contexts/state/ReaderStatePagesContext.tsx';
@@ -271,7 +272,7 @@ const BaseStandardReaderProgressBar = ({
 };
 
 export const StandardReaderProgressBar = withPropsFrom(
-    BaseStandardReaderProgressBar,
+    memo(BaseStandardReaderProgressBar),
     [
         useNavBarContext,
         useReaderProgressBarContext,