⚡ Bolt: Avoid intermediate array allocations in loops

.jules/bolt.md

@@ -61,3 +61,6 @@
 ## 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.
+## 2023-10-27 - [Filter and Map chaining overhead]
+**Learning:** [Chaining `.filter().map()` causes an intermediate array allocation for the result of the filter, which adds memory and garbage collection overhead, especially in frequent renders or large collections.]
+**Action:** [Use `.reduce()` to combine both operations in a single loop, pushing into an accumulator array.]

apps/desktop/src/features/workspace/GrooveMap.tsx

@@ -16,8 +16,15 @@ function GrooveMapComponent({ notes, isLoading }: GrooveMapProps) {
   const renderedNotes = notes ?? EMPTY_NOTES;
 
   // Find max offset to determine timeline width
+  // Performance: Avoid O(N) array overhead from .reduce() on large note arrays.
   const maxTime = useMemo(() => {
-    return renderedNotes.reduce((max, n) => Math.max(max, n.offset), 10);
+    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)

apps/desktop/src/features/workspace/SectionRoadmap.tsx

@@ -122,13 +122,14 @@ export function SectionRoadmap({ song, activeRole, onSongUpdate }: SectionRoadma
             </CardHeader>
 
             <CardContent className="p-4 space-y-4">
-              {section.roles
-                .filter(role => !activeRole || role.id === activeRole)
-                .map(role => (
-                  <div
-                    key={role.id}
-                    className={`rounded-xl border-l-4 p-4 transition-all hover:translate-x-1 ${getPriorityColor(role.rehearsalPriority)}`}
-                  >
+              {// Performance: Avoid intermediate array allocations by combining filter and map in a single loop via reduce
+              section.roles.reduce((acc, role) => {
+                if (!activeRole || role.id === activeRole) {
+                  acc.push(
+                    <div
+                      key={role.id}
+                      className={`rounded-xl border-l-4 p-4 transition-all hover:translate-x-1 ${getPriorityColor(role.rehearsalPriority)}`}
+                    >
                     <div className="mb-3 flex items-start justify-between">
                       <div className="flex flex-col gap-1">
                         <span className="text-sm font-bold text-slate-100">
@@ -209,7 +210,10 @@ export function SectionRoadmap({ song, activeRole, onSongUpdate }: SectionRoadma
                       </div>
                     </div>
                   </div>
-              ))}
+                  );
+                }
+                return acc;
+              }, [] as React.ReactElement[])}
             </CardContent>
           </Card>
         ))}