From 49bd928d7d99eb60fba7f8ea3eab65f2031edfda Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Sun, 5 Jul 2026 14:01:00 +0000
Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=20Bolt:=20Optimize=20node=20search=20?=
 =?UTF-8?q?filtering=20to=20prevent=20dynamic=20array=20allocation=20overh?=
 =?UTF-8?q?ead?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .jules/bolt.md       |  3 +++
 frontend/src/App.tsx | 18 +++++++-----------
 2 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/.jules/bolt.md b/.jules/bolt.md
index b45f9caa..24edecaa 100644
--- a/.jules/bolt.md
+++ b/.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.
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index e99700c5..c94bb861 100644
--- a/frontend/src/App.tsx
+++ b/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);
       }