From 4e24b35174a388c54694966f09d49c2d3d9fba26 Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Sat, 10 Oct 2026 22:46:17 +0000
Subject: [PATCH 1/2] =?UTF-8?q?=E2=9A=A1=20Bolt:=20TopUsersList=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=A0=8C=EB=8D=94?=
 =?UTF-8?q?=EB=A7=81=20=EC=84=B1=EB=8A=A5=20=EC=B5=9C=EC=A0=81=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`TopUsersList` 컴포넌트의 사용자 목록에서 최대 토큰(`maxTokens`)을 계산하는 배열 리듀스 연산에 `useMemo` 훅을 적용하여 메모이제이션했습니다. 이 훅은 조건부 렌더링(early return) 이전에 최상단에 배치하여 React의 규칙을 준수했습니다. 리렌더링 시 불필요한 배열 순회 및 `Math.max` 계산을 방지하여 메인 스레드 블로킹 시간을 줄이고 컴포넌트 렌더링 성능을 개선합니다. 특히 사용자 목록(`users`) 배열의 크기가 클 경우 성능 이점이 더욱 크게 나타납니다.
---
 .../components/dashboard/top-users-list.tsx   | 35 +++++++++++--------
 1 file changed, 20 insertions(+), 15 deletions(-)

diff --git a/packages/web/src/components/dashboard/top-users-list.tsx b/packages/web/src/components/dashboard/top-users-list.tsx
index 79f84ee7..86978e6f 100644
--- a/packages/web/src/components/dashboard/top-users-list.tsx
+++ b/packages/web/src/components/dashboard/top-users-list.tsx
@@ -1,31 +1,34 @@
-'use client'
+"use client";
 
-import { formatTokens, formatCost } from '@/lib/format'
-import type { UserStat } from '@argos/shared'
+import { useMemo } from "react";
+import { formatTokens, formatCost } from "@/lib/format";
+import type { UserStat } from "@argos/shared";
 
 interface TopUsersListProps {
-  users: UserStat[]
+  users: UserStat[];
 }
 
 export function TopUsersList({ users }: TopUsersListProps) {
+  // Use useMemo for expensive synchronous data derivations over lists to avoid recalculation on re-renders
+  const maxTokens = useMemo(
+    () =>
+      users.reduce((m, u) => Math.max(m, u.inputTokens + u.outputTokens), 0),
+    [users],
+  );
+
   if (users.length === 0) {
     return (
       <p className="text-sm text-muted-foreground py-6 text-center">
         최근 7일간 활동한 사용자가 없습니다
       </p>
-    )
+    );
   }
 
-  const maxTokens = users.reduce(
-    (m, u) => Math.max(m, u.inputTokens + u.outputTokens),
-    0,
-  )
-
   return (
     <ol className="space-y-2">
       {users.map((u, i) => {
-        const total = u.inputTokens + u.outputTokens
-        const pct = maxTokens > 0 ? (total / maxTokens) * 100 : 0
+        const total = u.inputTokens + u.outputTokens;
+        const pct = maxTokens > 0 ? (total / maxTokens) * 100 : 0;
         return (
           <li key={u.userId}>
             <div className="px-2 py-2">
@@ -35,7 +38,9 @@ export function TopUsersList({ users }: TopUsersListProps) {
                 </span>
                 <div className="min-w-0 flex-1">
                   <div className="flex items-baseline justify-between gap-2 mb-1">
-                    <span className="text-sm font-medium truncate">{u.name}</span>
+                    <span className="text-sm font-medium truncate">
+                      {u.name}
+                    </span>
                     <span className="text-xs tabular-nums text-foreground">
                       {formatTokens(total)}
                     </span>
@@ -55,8 +60,8 @@ export function TopUsersList({ users }: TopUsersListProps) {
               </div>
             </div>
           </li>
-        )
+        );
       })}
     </ol>
-  )
+  );
 }

From fc5ba02681da9cfd38aee65ba900ba7af68ee1ca Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Sat, 10 Oct 2026 22:49:03 +0000
Subject: [PATCH 2/2] =?UTF-8?q?=E2=9A=A1=20Bolt:=20TopUsersList=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=A0=8C=EB=8D=94?=
 =?UTF-8?q?=EB=A7=81=20=EC=84=B1=EB=8A=A5=20=EC=B5=9C=EC=A0=81=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`TopUsersList` 컴포넌트의 사용자 목록에서 최대 토큰(`maxTokens`)을 계산하는 배열 리듀스 연산에 `useMemo` 훅을 적용하여 메모이제이션했습니다. 이 훅은 조건부 렌더링(early return) 이전에 최상단에 배치하여 React의 규칙을 준수했습니다. 리렌더링 시 불필요한 배열 순회 및 `Math.max` 계산을 방지하여 메인 스레드 블로킹 시간을 줄이고 컴포넌트 렌더링 성능을 개선합니다. 특히 사용자 목록(`users`) 배열의 크기가 클 경우 성능 이점이 더욱 크게 나타납니다.