⚡ Bolt: 불필요한 chordsBySectionLabel 계산 제거 (렌더링 최적화)

.jules/bolt.md

@@ -41,3 +41,7 @@
 ## 2025-02-15 - Replace Array.from(map.values()).map with a for...of loop
 **Learning:** Using `Array.from(map.values()).map(...)` creates an unnecessary intermediate array which wastes memory allocation and garbage collection time, particularly for frequently re-rendered components handling large collections.
 **Action:** Use a `for...of` loop over `map.values()` to iterate and push mapped elements directly into the final array for O(1) memory and avoiding intermediate array allocations.
+
+## 2025-02-15 - Remove redundant map/list computations in React renders
+**Learning:** Computing derived state (such as aggregating roles into maps using nested loops) inside a React component's render body that is ultimately unused in the output JSX leads to wasted CPU cycles and unnecessary garbage collection overhead on every render.
+**Action:** Always verify that locally computed data structures are actively referenced in the return statement. Remove any dead code or unused computations to improve React render performance.

apps/desktop/src/features/chords/index.tsx

@@ -13,21 +13,6 @@ export function ChordsFeature(props: { title: string; song?: RehearsalSong | nul
     );
   }
 
-  // Collect unique chords across all sections and roles
-  const chordsBySectionLabel = new Map<string, { chord: string; functionLabel: string; source: string; roleName: string }[]>();
-  for (const section of song.sections) {
-    const entries: { chord: string; functionLabel: string; source: string; roleName: string }[] = [];
-    for (const role of section.roles) {
-      entries.push({
-        chord: role.harmony.chord,
-        functionLabel: role.harmony.functionLabel,
-        source: role.harmony.source,
-        roleName: role.name,
-      });
-    }
-    chordsBySectionLabel.set(section.label, entries);
-  }
-
   return (
     <section style={{ padding: "24px" }}>
       <h2>{title}</h2>