⚡ Bolt: Memoize calendar grid generation

.jules/bolt.md

@@ -10,3 +10,7 @@
 ## 2024-05-24 - Memoizing inline array maps
 **Learning:** Inline mapping of arrays inside JSX in large React components causes O(N) recalculation on every render.
 **Action:** Wrap inline JSX elements that map over arrays (e.g., lists of tasks) in a `useMemo` hook with specific dependencies.
+
+## 2024-05-24 - Memoizing calendar grid generation
+**Learning:** Inline array generation and mapping within JSX (e.g., `Array.from({ length: 35 }).map(...)`) causes O(N) re-renders and blocks the main thread during unrelated state updates, especially for grid components like calendars.
+**Action:** Wrap inline array generation and mapping inside JSX in a `useMemo` hook to avoid unnecessary re-renders.

frontend/src/components/calendar/CalendarMonthView.tsx

@@ -20,26 +20,34 @@ export function CalendarMonthView({ visibleMonthEvents }: Props) {
     return grouped;
   }, [visibleMonthEvents]);
 
+  // ⚡ Bolt Performance Optimization:
+  // Wrapped the inline array mapping of 35 grid cells inside a `useMemo` hook.
+  // Impact: Eliminates O(N) element creation (35 iterations) and prevents blocking
+  // the main thread during unrelated state updates, significantly reducing render time.
+  const gridCells = useMemo(() => {
+    return Array.from({ length: 35 }).map((_, i) => {
+      const dayEvents = monthEventsByDay.get(i) ?? [];
+      return (
+        <div key={i} className="min-h-[84px] p-2 sm:min-h-[100px]">
+          <span className={`text-sm font-semibold ${i % 7 === 0 ? 'text-red-500' : i % 7 === 6 ? 'text-blue-500' : 'text-muted-foreground'}`}>{i < 31 ? i + 1 : ''}</span>
+          {dayEvents.map((event) => (
+            <div key={event.id} className={`mt-1 rounded px-1.5 py-1 text-[10px] font-semibold leading-tight sm:px-2 sm:text-xs ${event.monthClassName}`}>
+              {event.time}<span className="hidden sm:inline"> {event.title}</span>
+            </div>
+          ))}
+        </div>
+      );
+    });
+  }, [monthEventsByDay]);
+
   return (
     <div className="h-full rounded-2xl border border-border bg-card shadow-sm flex flex-col overflow-hidden">
       <div className="grid grid-cols-7 border-b border-border bg-secondary/50 text-center text-sm font-semibold py-3">
         <div className="text-red-500">일</div><div>월</div><div>화</div><div>수</div><div>목</div><div>금</div><div className="text-blue-500">토</div>
       </div>
       <div className="grid grid-cols-7 grid-rows-5 flex-1 divide-x divide-y divide-border">
         {/* Simulated Grid Cells */}
-        {Array.from({ length: 35 }).map((_, i) => {
-          const dayEvents = monthEventsByDay.get(i) ?? [];
-          return (
-            <div key={i} className="min-h-[84px] p-2 sm:min-h-[100px]">
-              <span className={`text-sm font-semibold ${i % 7 === 0 ? 'text-red-500' : i % 7 === 6 ? 'text-blue-500' : 'text-muted-foreground'}`}>{i < 31 ? i + 1 : ''}</span>
-              {dayEvents.map((event) => (
-                <div key={event.id} className={`mt-1 rounded px-1.5 py-1 text-[10px] font-semibold leading-tight sm:px-2 sm:text-xs ${event.monthClassName}`}>
-                  {event.time}<span className="hidden sm:inline"> {event.title}</span>
-                </div>
-              ))}
-            </div>
-          );
-        })}
+        {gridCells}
       </div>
     </div>
   );