Memoize components

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