⚡ Bolt: Avoid intermediate array allocation in React renders

.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-16 - Avoid intermediate arrays in React map/filter chains
+
+**Learning:** Using chained array methods like `Array.from().map(...)` or `array.filter(...).map(...)` inside React render cycles allocates unnecessary intermediate arrays, creating GC pressure.
+**Action:** Replace `Array.from({ length: N }).map(...)` with `Array.from({ length: N }, ...)` to process items directly. Use `.reduce()` instead of `.filter().map()` to avoid intermediate array allocation.

apps/desktop/src/App.tsx

@@ -481,7 +481,8 @@ export function App() {
               </p>
               <div className="mt-3 h-14 overflow-hidden rounded-xl bg-[linear-gradient(90deg,rgba(34,211,238,.12),rgba(124,58,237,.12))]">
                 <div className="flex h-full items-end gap-0.5 px-2 pb-1" aria-hidden="true">
-                  {Array.from({ length: 34 }).map((_, index) => (
+                  {/* Performance: Use Array.from mapping function to avoid intermediate array allocation overhead */}
+                  {Array.from({ length: 34 }, (_, index) => (
                     <span
                       key={index}
                       className="w-1 rounded-t bg-gradient-to-t from-cyan-400 to-violet-400"

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

@@ -96,7 +96,8 @@ const SongStructure = memo(function SongStructure({ sections, t }: { sections: R
 
         <div className="relative min-w-[720px] border-t border-white/10 px-3 py-6" aria-hidden="true">
           <div className="flex h-24 items-center gap-1 overflow-hidden">
-            {Array.from({ length: 84 }).map((_, index) => (
+            {/* Performance: Use Array.from mapping function to avoid intermediate array allocation overhead */}
+            {Array.from({ length: 84 }, (_, index) => (
               <span
                 key={index}
                 className="w-1 flex-none rounded-full bg-gradient-to-t from-cyan-500 via-sky-400 to-violet-400 opacity-85"