The Problem

The node editor was dropping frames during drag operations. 60fps → 30fps when more than 20 nodes were on the canvas.

Investigation

Used React DevTools Profiler to identify the bottleneck:

1. Every node re-rendered on every mouse move during drag
2. The onNodesChange callback was creating new node objects on each call
3. Custom node components weren't memoized

Solution

// Before: inline object creation
const handleNodesChange = (changes: NodeChange[]) => {
  setNodes((nds) => applyNodeChanges(changes, nds));
};

// After: stable callback reference
const handleNodesChange = useCallback(
  (changes: NodeChange[]) => {
    setNodes((nds) => applyNodeChanges(changes, nds));
  },
  [setNodes]
);

Also wrapped all custom node components in React.memo with proper comparison functions.

Result

Back to consistent 60fps with 50+ nodes on canvas. The key insight: React Flow internally optimizes, but your custom node components bypass those optimizations if they're not properly memoized.

Lesson

Always profile before optimizing. The bottleneck was not where I expected, I initially suspected the connection line rendering.