Improve bulk migration render performance

src/features/migration/components/MIgrationEntryGroup.tsx

@@ -11,58 +11,60 @@ 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 = ({
-    status,
-    title,
-    entries,
-    color,
-    isMigrating = false,
-}: {
-    status: MigrationEntryStatus;
-    title: string;
-    entries: TMigrationEntry[];
-    color: ButtonProps['color'];
-    isMigrating?: boolean;
-}) => {
-    const isExpanded = MigrationManager.useGroupExpandState(status);
+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) {
-        return null;
-    }
+        if (!entries.length) {
+            return null;
+        }
 
-    return (
-        <Stack sx={{ width: '100%', gap: 2 }}>
-            <Button
-                onClick={() => MigrationManager.setGroupExpandState(status, !isExpanded)}
-                color={color}
-                variant="outlined"
-                startIcon={isExpanded ? <ExpandLessIcon /> : <ExpandMoreIcon />}
-                size="large"
-                sx={{
-                    py: 2,
-                    justifyContent: 'center',
-                    '& .MuiButton-startIcon': {
-                        position: 'absolute',
-                        left: (theme) => theme.spacing(4),
-                        margin: 0,
-                    },
-                }}
-            >
-                {title}
-            </Button>
-            <Collapse in={isExpanded} unmountOnExit>
-                <Stack sx={{ gap: 1 }}>
-                    {entries.map((entry) => (
-                        <MigrationEntry key={entry.mangaId} entry={entry} isMigrating={isMigrating} />
-                    ))}
-                </Stack>
-            </Collapse>
-        </Stack>
-    );
-};
+        return (
+            <Stack sx={{ width: '100%', gap: 2 }}>
+                <Button
+                    onClick={() => MigrationManager.setGroupExpandState(status, !isExpanded)}
+                    color={color}
+                    variant="outlined"
+                    startIcon={isExpanded ? <ExpandLessIcon /> : <ExpandMoreIcon />}
+                    size="large"
+                    sx={{
+                        py: 2,
+                        justifyContent: 'center',
+                        '& .MuiButton-startIcon': {
+                            position: 'absolute',
+                            left: (theme) => theme.spacing(4),
+                            margin: 0,
+                        },
+                    }}
+                >
+                    {title}
+                </Button>
+                <Collapse in={isExpanded} unmountOnExit>
+                    <Stack sx={{ gap: 1 }}>
+                        {entries.map((entry) => (
+                            <MigrationEntry key={entry.mangaId} entry={entry} isMigrating={isMigrating} />
+                        ))}
+                    </Stack>
+                </Collapse>
+            </Stack>
+        );
+    },
+);