From 3d5a9a021d2237a1df8f08b1f57f4486ad488e76 Mon Sep 17 00:00:00 2001 From: seonghobae <8172694+seonghobae@users.noreply.github.com> Date: Sun, 5 Jul 2026 04:13:32 +0000 Subject: [PATCH 1/2] perf(frontend): remove unused `chordsBySectionLabel` calculation to optimize render Removed the unused `chordsBySectionLabel` calculation inside the `ChordsFeature` component. This derived map was computed on every render using nested loops over the entire song section/role topology, but the result was never used in the component's JSX output. This removal saves CPU cycles and prevents unnecessary intermediate array/map allocations and garbage collection overhead during React render cycles. --- .jules/bolt.md | 4 ++++ apps/desktop/src/features/chords/index.tsx | 15 --------------- 2 files changed, 4 insertions(+), 15 deletions(-) diff --git a/.jules/bolt.md b/.jules/bolt.md index 38d4b732..be7d0a52 100644 --- a/.jules/bolt.md +++ b/.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. diff --git a/apps/desktop/src/features/chords/index.tsx b/apps/desktop/src/features/chords/index.tsx index e9d0c016..c9382022 100644 --- a/apps/desktop/src/features/chords/index.tsx +++ b/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(); - 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 (

{title}

From 923077675856267beee37a5d3a777876d17a9a2f Mon Sep 17 00:00:00 2001 From: seonghobae <8172694+seonghobae@users.noreply.github.com> Date: Sun, 5 Jul 2026 10:16:26 +0000 Subject: [PATCH 2/2] perf(frontend): remove unused `chordsBySectionLabel` calculation to optimize render Removed the unused `chordsBySectionLabel` calculation inside the `ChordsFeature` component. This derived map was computed on every render using nested loops over the entire song section/role topology, but the result was never used in the component's JSX output. This removal saves CPU cycles and prevents unnecessary intermediate array/map allocations and garbage collection overhead during React render cycles.