⚡ Bolt: [performance improvement] Add React.memo to NotificationListItem

src/components/notifications/NotificationListItem.tsx

@@ -1,16 +1,17 @@
+import { memo } from 'react';
 import { getNotificationLabel } from './notificationTypes';
 import type { NotificationItem } from './notificationTypes';
 
 interface NotificationListItemProps {
   notification: NotificationItem;
-  busyId: string | null;
+  isBusy: boolean;
   onOpenNotification: (notification: NotificationItem) => Promise<void>;
   onDelete: (event: React.MouseEvent<HTMLButtonElement>, notificationId: string) => Promise<void>;
 }
 
-export function NotificationListItem({
+export const NotificationListItem = memo(function NotificationListItem({
   notification,
-  busyId,
+  isBusy,
   onOpenNotification,
   onDelete,
 }: NotificationListItemProps) {
@@ -20,7 +21,7 @@ export function NotificationListItem({
         type="button"
         className="notification-item__content"
         onClick={() => void onOpenNotification(notification)}
-        disabled={busyId === notification.id}
+        disabled={isBusy}
       >
         <div className="notification-item__top">
           <span className="soft-tag">{getNotificationLabel(notification)}</span>
@@ -36,10 +37,10 @@ export function NotificationListItem({
         className="notification-item__delete"
         aria-label="알림 삭제"
         onClick={(event) => void onDelete(event, notification.id)}
-        disabled={busyId === notification.id}
+        disabled={isBusy}
       >
         ×
       </button>
     </article>
   );
-}
+});

src/components/notifications/NotificationPanel.tsx

@@ -43,7 +43,7 @@ export function NotificationPanel({
           <NotificationListItem
             key={notification.id}
             notification={notification}
-            busyId={busyId}
+            isBusy={busyId === notification.id}
             onOpenNotification={handleOpenNotification}
             onDelete={handleDelete}
           />

src/components/notifications/useNotificationPanelActions.ts

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import { useEventCallback } from '../../hooks/useEventCallback';
 import type { NotificationItem } from './notificationTypes';
 
 interface UseNotificationPanelActionsParams {
@@ -18,7 +19,7 @@ export function useNotificationPanelActions({
   const [busyAll, setBusyAll] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
-  async function handleOpenNotification(notification: NotificationItem) {
+  const handleOpenNotification = useEventCallback(async (notification: NotificationItem) => {
     try {
       setBusyId(notification.id);
       setError(null);
@@ -29,9 +30,9 @@ export function useNotificationPanelActions({
     } finally {
       setBusyId(null);
     }
-  }
+  });
 
-  async function handleMarkAll() {
+  const handleMarkAll = useEventCallback(async () => {
     try {
       setBusyAll(true);
       setError(null);
@@ -41,9 +42,9 @@ export function useNotificationPanelActions({
     } finally {
       setBusyAll(false);
     }
-  }
+  });
 
-  async function handleDelete(event: React.MouseEvent<HTMLButtonElement>, notificationId: string) {
+  const handleDelete = useEventCallback(async (event: React.MouseEvent<HTMLButtonElement>, notificationId: string) => {
     event.stopPropagation();
     try {
       setBusyId(notificationId);
@@ -54,7 +55,7 @@ export function useNotificationPanelActions({
     } finally {
       setBusyId(null);
     }
-  }
+  });
 
   return {
     busyId,

test/unit/notification-list-render.test.tsx

@@ -0,0 +1,81 @@
+import { render } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { NotificationPanel } from '../../src/components/notifications/NotificationPanel';
+import type { NotificationItem, NotificationPanelActions } from '../../src/components/notifications/notificationTypes';
+
+const labelRenderCounts = vi.hoisted(() => new Map<string, number>());
+
+vi.mock('../../src/components/notifications/notificationTypes', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('../../src/components/notifications/notificationTypes')>();
+
+  return {
+    ...actual,
+    getNotificationLabel: vi.fn((notification: NotificationItem) => {
+      labelRenderCounts.set(notification.id, (labelRenderCounts.get(notification.id) ?? 0) + 1);
+      return notification.type;
+    }),
+  };
+});
+
+function createNotification(id: string): NotificationItem {
+  return {
+    id,
+    type: 'review-comment',
+    title: `title-${id}`,
+    body: `body-${id}`,
+    createdAt: '2026-06-13T00:00:00Z',
+    isRead: false,
+    reviewId: `review-${id}`,
+    commentId: `comment-${id}`,
+    routeId: null,
+    actorName: null,
+  };
+}
+
+function createActions(busyId: string | null): NotificationPanelActions {
+  return {
+    busyAll: false,
+    busyId,
+    error: null,
+    handleDelete: stableHandlers.handleDelete,
+    handleMarkAll: stableHandlers.handleMarkAll,
+    handleOpenNotification: stableHandlers.handleOpenNotification,
+  };
+}
+
+const stableHandlers = {
+  handleDelete: vi.fn(async () => undefined),
+  handleMarkAll: vi.fn(async () => undefined),
+  handleOpenNotification: vi.fn(async () => undefined),
+};
+
+describe('NotificationPanel item render stability', () => {
+  it('does not re-render inactive notification items when another item becomes busy', () => {
+    labelRenderCounts.clear();
+    const notifications = [createNotification('n-1'), createNotification('n-2')];
+
+    const { rerender } = render(
+      <NotificationPanel
+        sessionUserName="tester"
+        notifications={notifications}
+        unreadCount={2}
+        actions={createActions(null)}
+      />,
+    );
+
+    expect(labelRenderCounts.get('n-1')).toBe(1);
+    expect(labelRenderCounts.get('n-2')).toBe(1);
+
+    rerender(
+      <NotificationPanel
+        sessionUserName="tester"
+        notifications={notifications}
+        unreadCount={2}
+        actions={createActions('n-1')}
+      />,
+    );
+
+    expect(labelRenderCounts.get('n-1')).toBe(2);
+    expect(labelRenderCounts.get('n-2')).toBe(1);
+  });
+});