From d066c10fd03f92327bde34f7b6da795c55303767 Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Wed, 2 Sep 2026 02:10:21 +0000
Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=20Bolt:=20Prevent=20intermediate=20ar?=
 =?UTF-8?q?ray=20allocations=20in=20ERD=20hot=20path?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replaced `Array.from(string)` with a `for...of` loop in `sanitizeHandleId`
to prevent intermediate array allocations and reduce garbage collection
pressure during graph rendering and interactions.
---
 .jules/bolt.md                  |  3 +++
 frontend/src/erd/handleUtils.ts | 10 ++++++----
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/.jules/bolt.md b/.jules/bolt.md
index f1a8c1466..7d4c5edb0 100644
--- a/.jules/bolt.md
+++ b/.jules/bolt.md
@@ -77,3 +77,6 @@ Optimized metric route processing to O(N) by creating a mapping of routes direct
 ## 2024-07-13 - [Optimize Export Dictionary FK lookups]
 **Learning:** Found O(N * C * E) performance bottleneck in ERD export dictionaries due to repeated array searching with `edges.some()` inside a nested loop over nodes and columns.
 **Action:** Replace repeated linear array scans for edges by precomputing O(1) Set lookups of foreign key column handles per node before looping.
+## 2024-06-03 - Prevent intermediate array allocations in React hot paths
+**Learning:** Using `Array.from(string)` to iterate over strings allocates intermediate arrays and map functions, causing significant garbage collection pressure on hot paths like ERD handle generation. `for...of` natively iterates over Unicode code points without this overhead.
+**Action:** Always prefer `for...of` loops over `Array.from` when iterating strings in performance-critical rendering paths (like graph nodes and handles) to minimize garbage collection pressure.
diff --git a/frontend/src/erd/handleUtils.ts b/frontend/src/erd/handleUtils.ts
index 054d5ab2a..a0b0fb536 100644
--- a/frontend/src/erd/handleUtils.ts
+++ b/frontend/src/erd/handleUtils.ts
@@ -1,8 +1,10 @@
 export function sanitizeHandleId(columnName: string): string {
-  const encoded = Array.from(columnName, (char) => {
-    // Array.from only yields non-empty Unicode scalars, so codePointAt(0) is defined.
-    return char.codePointAt(0)!.toString(16).padStart(4, '0')
-  }).join('-')
+  const encodedChars = [];
+  for (const char of columnName) {
+    // for...of iterates over Unicode code points natively
+    encodedChars.push(char.codePointAt(0)!.toString(16).padStart(4, '0'));
+  }
+  const encoded = encodedChars.join('-');
 
   return `c-${encoded || 'empty'}`
 }