diff --git a/.jules/bolt.md b/.jules/bolt.md index fa2deda3f..5fdec6896 100644 --- a/.jules/bolt.md +++ b/.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. diff --git a/frontend/src/components/NetworkGraph.tsx b/frontend/src/components/NetworkGraph.tsx index f9eb61c71..b890fa746 100644 --- a/frontend/src/components/NetworkGraph.tsx +++ b/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) { 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(null); const networkRef = useRef(null); const unavailableRelationshipDescriptionId = useId(); @@ -478,4 +479,4 @@ export default function NetworkGraph() { /> ); -} +});