⚡ Bolt: Optimize node search filtering to prevent dynamic array allocation overhead

.jules/bolt.md

@@ -60,3 +60,6 @@ Optimized metric route processing to O(N) by creating a mapping of routes direct
 ## 2026-06-25 - Avoid Map allocations in frontend ERD loops and mutate asyncpg records in-place
 **Learning:** The frontend `snapshotToGraph` iterates over thousands of columns to generate the graph, so repeated lookups and redundant collection assignments increase GC pressure. Backend snapshot column dictionaries are freshly instantiated for the payload, so `add_column_examples` can safely fill missing fields in place.
 **Action:** Reuse existing collections while aggregating relational data, create `Map`/`Set` entries only on first use, and check for missing example fields before calling expensive inference helpers.
+## 2024-07-05 - Avoid dynamic array allocation overhead in large React iterations
+**Learning:** Using functional array methods like `.flatMap()`, spread syntax (`...`), and `.join()` inside React `useMemo` hooks that iterate over large data sets (like thousands of ERD nodes and columns) causes excessive dynamic array allocations and garbage collection overhead, leading to "Maximum call stack size exceeded" errors or significant performance degradation during typing/filtering.
+**Action:** When constructing strings or combining data during large iterations, prefer standard iterative string concatenation (`+=`) or simple loops over allocating and spreading intermediate arrays.

frontend/src/App.tsx

@@ -182,17 +182,13 @@ export default function App() {
     if (!normalizedNodeSearch) return new Set<string>();
     const matches = new Set<string>();
     for (const node of nodes) {
-      const haystack = [
-        node.data.title,
-        node.data.comment ?? "",
-        ...node.data.columns.flatMap((column) => [
-          column.column_name,
-          column.data_type,
-          column.column_comment ?? "",
-        ]),
-      ]
-        .join(" ")
-        .toLocaleLowerCase();
+      // ⚡ Bolt: Avoid excessive dynamic array allocations and garbage collection overhead
+      // by using iterative string concatenation instead of .flatMap(), spread syntax, and .join().
+      let haystack = node.data.title + " " + (node.data.comment ?? "");
+      for (const column of node.data.columns) {
+        haystack += " " + column.column_name + " " + column.data_type + " " + (column.column_comment ?? "");
+      }
+      haystack = haystack.toLocaleLowerCase();
       if (haystack.includes(normalizedNodeSearch)) {
         matches.add(node.id);
       }