⚡ Bolt: avoid intermediate tuple array allocation on Map entries

.jules/bolt.md

@@ -76,3 +76,7 @@ Simulating with N=5000 icons, M=20 slugs:
 ## 2024-10-10 - Avoid `new Map(array.map(...))` initialization pattern
 **Learning:** Initializing Maps using `new Map(array.map(...))` creates an intermediate array of tuples, which increases memory allocation and triggers garbage collection. This is an explicit anti-pattern in this project.
 **Action:** Always use an inline initialization function with a single-pass `for` loop to populate Maps and Sets, avoiding intermediate object allocations.
+
+## 2024-10-12 - Prevent intermediate array allocations on Map entries
+**Learning:** Using `[...map.entries()].map(([k, v]) => ({ k, v }))` allocates a full intermediate array of tuples before mapping them to objects. For large maps (like categories or icons), this creates a massive spike in memory usage and triggers aggressive garbage collection pauses on the main thread, leading to jitter in the UI during calculations.
+**Action:** Always use `Array.from(map, ([k, v]) => ({ k, v }))` instead, which iterates over the Map entries and applies the mapping function in a single pass without allocating the intermediate tuple array.

src/components/home-content.tsx

@@ -271,8 +271,9 @@ export function HomeContent({ categoryCounts, count, recentIcons, collections, d
         counts.set(c, (counts.get(c) || 0) + 1);
       }
     }
-    return [...counts.entries()]
-      .map(([name, count]) => ({ name, count }))
+    // ⚡ Bolt: Use `Array.from(map, mappingFunction)` instead of `[...map.entries()].map(...)`
+    // to avoid allocating a massive intermediate array of tuples and reduce GC pressure.
+    return Array.from(counts, ([name, count]) => ({ name, count }))
       .sort((a, b) => a.name.localeCompare(b.name));
   }, [collectionParam, collectionIcons, categoryCounts]);
 

src/components/home-hero.tsx

@@ -394,8 +394,9 @@ export function HomeHero({
         counts.set(c, (counts.get(c) || 0) + 1);
       }
     }
-    return [...counts.entries()]
-      .map(([name, count]) => ({ name, count }))
+    // ⚡ Bolt: Use `Array.from(map, mappingFunction)` instead of `[...map.entries()].map(...)`
+    // to avoid allocating a massive intermediate array of tuples and reduce GC pressure.
+    return Array.from(counts, ([name, count]) => ({ name, count }))
       .sort((a, b) => b.count - a.count)
       .slice(0, 8);
   }, [collectionIcons]);

src/lib/command-palette.ts

@@ -28,8 +28,9 @@ export function categoriesFromIcons(icons: readonly IconEntry[]): PaletteCategor
       counts.set(name, (counts.get(name) ?? 0) + 1);
     }
   }
-  return [...counts.entries()]
-    .map(([name, count]) => ({ name, count }))
+  // ⚡ Bolt: Use `Array.from(map, mappingFunction)` instead of `[...map.entries()].map(...)`
+  // to avoid allocating a massive intermediate array of tuples and reduce GC pressure.
+  return Array.from(counts, ([name, count]) => ({ name, count }))
     .sort((a, b) => b.count - a.count || a.name.localeCompare(b.name));
 }
 

src/lib/icons.ts

@@ -126,8 +126,9 @@ export function getCategoryCounts(collection?: Collection): { name: string; coun
       }
     }
   }
-  return [...counts.entries()]
-    .map(([name, count]) => ({ name, count }))
+  // ⚡ Bolt: Use `Array.from(map, mappingFunction)` instead of `[...map.entries()].map(...)`
+  // to avoid allocating a massive intermediate array of tuples and reduce GC pressure.
+  return Array.from(counts, ([name, count]) => ({ name, count }))
     .sort((a, b) => a.name.localeCompare(b.name));
 }
 
@@ -176,7 +177,8 @@ export function getCollections(): { name: Collection; count: number }[] {
   for (const icon of icons) {
     counts.set(icon.collection, (counts.get(icon.collection) || 0) + 1);
   }
-  return [...counts.entries()]
-    .map(([name, count]) => ({ name, count }))
+  // ⚡ Bolt: Use `Array.from(map, mappingFunction)` instead of `[...map.entries()].map(...)`
+  // to avoid allocating a massive intermediate array of tuples and reduce GC pressure.
+  return Array.from(counts, ([name, count]) => ({ name, count }))
     .sort((a, b) => b.count - a.count);
 }

src/scripts/generate-api.ts

@@ -72,8 +72,9 @@ function main() {
       counts.set(c, (counts.get(c) || 0) + 1);
     }
   }
-  const categories = [...counts.entries()]
-    .map(([name, count]) => ({ name, count }))
+  // ⚡ Bolt: Use `Array.from(map, mappingFunction)` instead of `[...map.entries()].map(...)`
+  // to avoid allocating a massive intermediate array of tuples and reduce GC pressure.
+  const categories = Array.from(counts, ([name, count]) => ({ name, count }))
     .sort((a, b) => a.name.localeCompare(b.name));
 
   writeFileSync(