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>
-  )
+  );
 }