⚡ Bolt: NetworkGraph 렌더링 성능 최적화

.jules/bolt.md

@@ -26,3 +26,6 @@
 ## 2024-05-24 - [React Component Memoization]
 **Learning:** In React components like `WorkspaceHome`, when layout state or polling changes trigger parent re-renders, expensive child components like `EmailDetail` will also re-render unnecessarily if not memoized.
 **Action:** Always consider `React.memo` for heavy child components that rely on stable props (like IDs) when the parent component has frequent unrelated state updates.
+## 2024-05-24 - Memoizing heavy visualization components
+**Learning:** Heavy visualization components that instantiate complex third-party DOM-manipulating libraries (e.g., `NetworkGraph` using `vis-network`) must be wrapped in `React.memo` to prevent costly re-instantiation and layout thrashing performance bottlenecks when parent components (like layout wrappers or dashboards) frequently re-render.
+**Action:** Use `React.memo` for DOM-heavy visualization components that receive simple props and do not need to re-render upon unrelated layout state updates.

frontend/src/components/NetworkGraph.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useId, useMemo, useRef, useState } from 'react';
+import { useEffect, useId, useMemo, useRef, useState, memo } from 'react';
 import { Network } from 'vis-network';
 
 interface Node {
@@ -157,7 +157,8 @@ function describeEdge(edge: Edge, nodeMap: Map<string | number, string>) {
 
 import { apiClient } from '@/lib/api-client';
 
-export default function NetworkGraph() {
+// ⚡ Bolt: Wrapped heavy vis-network visualization in React.memo to prevent costly re-instantiation and layout thrashing
+export default memo(function NetworkGraph() {
   const containerRef = useRef<HTMLDivElement>(null);
   const networkRef = useRef<Network | null>(null);
   const unavailableRelationshipDescriptionId = useId();
@@ -478,4 +479,4 @@ export default function NetworkGraph() {
       />
     </div>
   );
-}
+});