refactor(erd): predecessor for-of handle encoding experiment

.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.

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'}`
 }