Improve bulk migration render performance

src/features/migration/components/MIgrationEntryGroup.tsx

@@ -11,25 +11,26 @@ import type { ButtonProps } from '@mui/material/Button';
 import Button from '@mui/material/Button';
 import Collapse from '@mui/material/Collapse';
 import Stack from '@mui/material/Stack';
-import {} from 'react';
+import { memo } from 'react';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import ExpandLessIcon from '@mui/icons-material/ExpandLess';
 import { MigrationEntry } from '@/features/migration/components/migration-entry/MigrationEntry.tsx';
 import { MigrationManager } from '@/features/migration/MigrationManager.ts';
 
-export const MigrationEntryGroup = ({
+export const MigrationEntryGroup = memo(
+    ({
         status,
         title,
         entries,
         color,
         isMigrating = false,
-}: {
+    }: {
         status: MigrationEntryStatus;
         title: string;
         entries: TMigrationEntry[];
         color: ButtonProps['color'];
         isMigrating?: boolean;
-}) => {
+    }) => {
         const isExpanded = MigrationManager.useGroupExpandState(status);
 
         if (!entries.length) {
@@ -65,4 +66,5 @@ export const MigrationEntryGroup = ({
                 </Collapse>
             </Stack>
         );
-};
+    },
+);

src/features/migration/components/MigrationCard.tsx

@@ -21,8 +21,9 @@ import { Sources } from '@/features/source/services/Sources';
 import type { TMigratableSource } from '@/features/migration/Migration.types.ts';
 import { ReactRouter } from '@/lib/react-router/ReactRouter.ts';
 import { AppRoutes } from '@/base/AppRoute.constants.ts';
+import { memo } from 'react';
 
-export const MigrationCard = (source: TMigratableSource) => {
+export const MigrationCard = memo((source: TMigratableSource) => {
     const { id, name, lang, iconUrl, mangaCount } = source;
     const { t } = useLingui();
 
@@ -66,4 +67,4 @@ export const MigrationCard = (source: TMigratableSource) => {
             </CardActionArea>
         </Card>
     );
-};
+});

src/features/migration/components/MigrationSourceList.tsx

@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { useCallback, useMemo, useState } from 'react';
+import { memo, useCallback, useMemo, useState } from 'react';
 import Box from '@mui/material/Box';
 import Card from '@mui/material/Card';
 import Chip from '@mui/material/Chip';
@@ -36,19 +36,20 @@ import { languageCodeToName } from '@/base/utils/Languages.ts';
 import { DEFAULT_FULL_FAB_HEIGHT } from '@/base/components/buttons/StyledFab.tsx';
 import Stack from '@mui/material/Stack';
 
-const SourceCard = ({
+const SourceCard = memo(
+    ({
         source,
         onToggle,
         isCurrentSource,
         isSelected,
         isDragging,
-}: {
+    }: {
         source: SourceItem;
         onToggle: (id: SourceIdInfo['id']) => void;
         isCurrentSource: boolean;
         isSelected: boolean;
         isDragging?: boolean;
-}) => {
+    }) => {
         const { t } = useLingui();
 
         return (
@@ -84,7 +85,8 @@ const SourceCard = ({
                 </Card>
             </StyledGroupItemWrapper>
         );
-};
+    },
+);
 
 export const MigrationSourceList = ({
     sources,

src/features/migration/components/migration-entry/MigrationEntry.tsx

@@ -9,7 +9,7 @@
 import type { MigrationMatch, TMigrationEntry } from '@/features/migration/Migration.types.ts';
 import { MigrationManager } from '@/features/migration/MigrationManager.ts';
 import Paper from '@mui/material/Paper';
-import { useMemo } from 'react';
+import { memo, useMemo } from 'react';
 import { MediaQuery } from '@/base/utils/MediaQuery.tsx';
 import { applyStyles } from '@/base/utils/ApplyStyles.ts';
 import { MigrationSourceEntry } from '@/features/migration/components/migration-entry/MigrationSourceEntry.tsx';
@@ -28,7 +28,8 @@ import Divider from '@mui/material/Divider';
 import { MigrationEntryStatusIndicator } from '@/features/migration/components/migration-entry/MigrationEntryStatusIndicator.tsx';
 import Box from '@mui/material/Box';
 
-const MigrationEntryMobile = ({
+const MigrationEntryMobile = memo(
+    ({
         entry,
         entry: { mangaId, mangaTitle, status, error, isExcluded },
         destinationEntry,
@@ -36,14 +37,14 @@ const MigrationEntryMobile = ({
         isExpanded,
         setIsExpanded,
         isMigrating,
-}: {
+    }: {
         entry: TMigrationEntry;
         destinationEntry: MigrationMatch | undefined;
         otherSearchMatches: MigrationMatch[];
         isExpanded: boolean;
         setIsExpanded: (expanded: boolean) => void;
         isMigrating: boolean;
-}) => {
+    }) => {
         const { t } = useLingui();
 
         return (
@@ -69,9 +70,12 @@ const MigrationEntryMobile = ({
                             startIcon={<SearchIcon />}
                             variant="text"
                             onClick={() => {
-                            ReactRouter.navigate(AppRoutes.migrate.childRoutes.manualSearch.path(mangaId, mangaTitle), {
+                                ReactRouter.navigate(
+                                    AppRoutes.migrate.childRoutes.manualSearch.path(mangaId, mangaTitle),
+                                    {
                                         state: { mangaTitle: mangaTitle },
-                            });
+                                    },
+                                );
                             }}
                         >{t`Manual search`}</Button>
                     </Stack>
@@ -82,7 +86,11 @@ const MigrationEntryMobile = ({
                             }
 
                             return (
-                            <MigrationMatchedEntry key={searchMatch.id} sourceMangaId={mangaId} entry={searchMatch} />
+                                <MigrationMatchedEntry
+                                    key={searchMatch.id}
+                                    sourceMangaId={mangaId}
+                                    entry={searchMatch}
+                                />
                             );
                         })}
                     </Stack>
@@ -101,9 +109,11 @@ const MigrationEntryMobile = ({
                 )}
             </>
         );
-};
+    },
+);
 
-export const MigrationEntryDesktop = ({
+export const MigrationEntryDesktop = memo(
+    ({
         entry,
         entry: { mangaId, mangaTitle, status, error },
         destinationEntry,
@@ -111,14 +121,14 @@ export const MigrationEntryDesktop = ({
         isExpanded,
         setIsExpanded,
         isMigrating,
-}: {
+    }: {
         entry: TMigrationEntry;
         destinationEntry: MigrationMatch | undefined;
         otherSearchMatches: MigrationMatch[];
         isExpanded: boolean;
         setIsExpanded: (expanded: boolean) => void;
         isMigrating: boolean;
-}) => {
+    }) => {
         const { t } = useLingui();
 
         return (
@@ -183,9 +193,11 @@ export const MigrationEntryDesktop = ({
                 </Collapse>
             </>
         );
-};
+    },
+);
 
-export const MigrationEntry = ({ entry: propEntry, isMigrating }: { entry: TMigrationEntry; isMigrating: boolean }) => {
+export const MigrationEntry = memo(
+    ({ entry: propEntry, isMigrating }: { entry: TMigrationEntry; isMigrating: boolean }) => {
         const isTabletWidth = MediaQuery.useIsTabletWidth();
 
         const entry = useMemo(() => MigrationManager.getUpToDateMigrationEntry(propEntry), [propEntry]);
@@ -238,4 +250,5 @@ export const MigrationEntry = ({ entry: propEntry, isMigrating }: { entry: TMigr
                 />
             </Paper>
         );
-};
+    },
+);

src/features/migration/components/migration-entry/MigrationMatchedEntry.tsx

@@ -24,14 +24,10 @@ import Button from '@mui/material/Button';
 import CardActionArea from '@mui/material/CardActionArea';
 import Link from '@mui/material/Link';
 import { Link as RouterLink } from 'react-router-dom';
+import { memo } from 'react';
 
-export const MigrationMatchedEntry = ({
+export const MigrationMatchedEntry = memo(
-    sourceMangaId,
+    ({ sourceMangaId, entry }: { sourceMangaId: MangaIdInfo['id']; entry: MigrationMatch }) => {
-    entry,
-}: {
-    sourceMangaId: MangaIdInfo['id'];
-    entry: MigrationMatch;
-}) => {
         const { t } = useLingui();
 
         return (
@@ -81,7 +77,8 @@ export const MigrationMatchedEntry = ({
                             <Button
                                 variant="outlined"
                                 {...MUIUtil.preventRippleProp({
-                                onClick: () => MigrationManager.selectMatch(sourceMangaId, entry.id, entry.sourceId),
+                                    onClick: () =>
+                                        MigrationManager.selectMatch(sourceMangaId, entry.id, entry.sourceId),
                                 })}
                             >{t`Select`}</Button>
                         ))()}
@@ -89,4 +86,5 @@ export const MigrationMatchedEntry = ({
                 </CardActionArea>
             </MigrationEntryCard>
         );
-};
+    },
+);

src/features/migration/components/migration-entry/MigrationSourceEntry.tsx

@@ -20,8 +20,9 @@ import { useLingui } from '@lingui/react/macro';
 import Stack from '@mui/material/Stack';
 import Link from '@mui/material/Link';
 import { Link as RouterLink } from 'react-router-dom';
+import { memo } from 'react';
 
-export const MigrationSourceEntry = (entry: TMigrationEntry) => {
+export const MigrationSourceEntry = memo((entry: TMigrationEntry) => {
     const {
         mangaId,
         mangaThumbnailUrl,
@@ -94,4 +95,4 @@ export const MigrationSourceEntry = (entry: TMigrationEntry) => {
             </Stack>
         </Box>
     );
-};
+});