From 45024d86b99e8ad365818e4f10d7649324d55c1d Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Sat, 4 Jul 2026 14:06:05 +0000
Subject: [PATCH] =?UTF-8?q?perf(frontend):=20=EC=B5=9C=EC=A0=81=ED=99=94?=
 =?UTF-8?q?=EB=90=9C=20=EA=B2=80=EC=83=89=20=EB=AC=B8=EC=9E=90=EC=97=B4=20?=
 =?UTF-8?q?=EC=83=9D=EC=84=B1=20=EB=A1=9C=EC=A7=81=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- `App.tsx`의 노드 검색 필터링 중 빈번하게 호출되는 `.flatMap()`과 `.join(" ")` 체인을 `for` 루프와 `+=` 연산자를 활용한 명시적 문자열 연결로 대체.
- 사용자 입력(검색어 타이핑) 시 발생하는 짧은 생명주기의 배열 및 문자열 객체 생성 횟수를 극적으로 줄여 가비지 컬렉션(GC) 부하 감소 및 메인 스레드 블로킹 현상 방지.
---
 .jules/bolt.md       |  3 +++
 frontend/src/App.tsx | 22 +++++++++++-----------
 2 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/.jules/bolt.md b/.jules/bolt.md
index b45f9caa..211e0738 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-25 - Avoid flatMap and join for High-Frequency String Building
+**Learning:** During real-time operations like typing in a search bar, iterating over dynamically sized React state arrays with `.flatMap()` and `.join(" ")` creates excessive short-lived intermediate arrays and strings, causing severe garbage collection pressure and main thread blocking.
+**Action:** Replace functional `.flatMap().join()` chains with explicit loops and standard iterative string concatenation (`+=`) for performance-critical string searching over collections of nodes.
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index e99700c5..1a3942ea 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -182,17 +182,17 @@ 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();
+      let haystack = node.data.title;
+      if (node.data.comment) {
+        haystack += " " + node.data.comment;
+      }
+      for (const column of node.data.columns) {
+        haystack += " " + column.column_name + " " + column.data_type;
+        if (column.column_comment) {
+          haystack += " " + column.column_comment;
+        }
+      }
+      haystack = haystack.toLocaleLowerCase();
       if (haystack.includes(normalizedNodeSearch)) {
         matches.add(node.id);
       }