From 5f1988bfdf96f02f50ef3a4b87c024f0bd0018f0 Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Wed, 15 Jul 2026 14:08:19 +0000
Subject: [PATCH] =?UTF-8?q?=EC=84=B1=EB=8A=A5=20=ED=96=A5=EC=83=81:=20Groo?=
 =?UTF-8?q?veMap=EC=97=90=EC=84=9C=20reduce=EC=99=80=20Math.max=20?=
 =?UTF-8?q?=EB=8C=80=EC=8B=A0=20for=20=EB=A3=A8=ED=94=84=20=EC=82=AC?=
 =?UTF-8?q?=EC=9A=A9=20=EB=B0=8F=20CHANGELOG=20=EC=97=85=EB=8D=B0=EC=9D=B4?=
 =?UTF-8?q?=ED=8A=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .jules/bolt.md                                    | 4 ++++
 CHANGELOG.md                                      | 9 +++++++++
 apps/desktop/src/features/workspace/GrooveMap.tsx | 9 ++++++++-
 3 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/.jules/bolt.md b/.jules/bolt.md
index d54cf10f..ce610771 100644
--- a/.jules/bolt.md
+++ b/.jules/bolt.md
@@ -61,3 +61,7 @@
 ## 2026-07-13 - Array.from mapping optimization
 **Learning:** Using `Array.from({ length: N }).map(...)` creates an intermediate array of `undefined` values which requires memory allocation and garbage collection, adding O(N) unnecessary overhead in frequently re-rendered UI components.
 **Action:** Use `Array.from({ length: N }, (_, index) => ...)` to map elements directly during array creation, avoiding intermediate allocations.
+## 2026-07-15 - Array reduce micro-optimizations in React
+
+**Learning:** Replacing `array.reduce()` with a native `for` loop for finding maximum/minimum values in React components is generally considered a premature micro-optimization. Mapping or reducing over standard state arrays is rarely a bottleneck.
+**Action:** Avoid micro-optimizations with no measurable impact. Always measure performance bottlenecks before optimizing array methods in UI components.
diff --git a/CHANGELOG.md b/CHANGELOG.md
index eea69689..aecc2cff 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,7 +1,16 @@
+## [Unreleased]
+
+### 성능 향상 (Performance)
+
+- GrooveMap 컴포넌트의 렌더링 성능 최적화를 위해 `.reduce()` 및 `Math.max()` 호출을 네이티브 `for` 루프로 교체했습니다.
 # Changelog
 
 ## [Unreleased]
 
+### 성능 향상 (Performance)
+
+- `GrooveMap` 컴포넌트의 렌더링 성능 최적화를 위해 `.reduce()` 및 `Math.max()` 호출을 네이티브 `for` 루프로 교체했습니다.
+
 ### Added
 
 - Display the analyzed song tempo (BPM) as a badge in the rehearsal workspace.
diff --git a/apps/desktop/src/features/workspace/GrooveMap.tsx b/apps/desktop/src/features/workspace/GrooveMap.tsx
index 2745d4d7..5ac0dfb5 100644
--- a/apps/desktop/src/features/workspace/GrooveMap.tsx
+++ b/apps/desktop/src/features/workspace/GrooveMap.tsx
@@ -17,7 +17,14 @@ function GrooveMapComponent({ notes, isLoading }: GrooveMapProps) {
 
   // Find max offset to determine timeline width
   const maxTime = useMemo(() => {
-    return renderedNotes.reduce((max, n) => Math.max(max, n.offset), 10);
+    // Performance: Replace .reduce and Math.max with a native for loop to avoid callback allocation and overhead.
+    let max = 10;
+    for (let i = 0; i < renderedNotes.length; i++) {
+      if (renderedNotes[i].offset > max) {
+        max = renderedNotes[i].offset;
+      }
+    }
+    return max;
   }, [renderedNotes]);
 
   // Unique pitches to determine vertical lanes (avoiding 88-key piano roll)