perf(workflow): stabilize subflow edge selector

Author: waleedlatif1

packages/workflow-renderer/src/subflow/subflow-node-view.tsx

@@ -5,6 +5,7 @@ import {
   Handle,
   internalsSymbol,
   Position,
+  type ReactFlowState,
   useStore as useReactFlowStore,
   useStoreApi as useReactFlowStoreApi,
   useUpdateNodeInternals,
@@ -344,14 +345,21 @@ export function SubflowNodeView({
   const isPreviewSelected = data?.isPreviewSelected || false
 
   const endHandleId = data.kind === 'loop' ? 'loop-end-source' : 'parallel-end-source'
-  const displayedEdges = useReactFlowStore(
-    useCallback((state) => (data.parentId ? state.edges : null), [data.parentId])
-  )
-  const showFixedEndPort = useMemo(
-    () =>
-      !displayedEdges ||
-      displayedEdges.some((edge) => edge.source === id && edge.sourceHandle === endHandleId),
-    [displayedEdges, endHandleId, id]
+  const showFixedEndPort = useReactFlowStore(
+    useMemo(() => {
+      let previousEdges: ReactFlowState['edges'] | undefined
+      let previousResult = !data.parentId
+
+      return (state: ReactFlowState) => {
+        if (!data.parentId || state.edges === previousEdges) return previousResult
+
+        previousEdges = state.edges
+        previousResult = state.edges.some(
+          (edge) => edge.source === id && edge.sourceHandle === endHandleId
+        )
+        return previousResult
+      }
+    }, [data.parentId, endHandleId, id])
   )
   const BlockIcon = data.kind === 'loop' ? Repeat : Split
   const blockName = data.name || (data.kind === 'loop' ? 'Loop' : 'Parallel')

packages/workflow-renderer/src/workflow-block/workflow-block-border-mount.test.tsx

@@ -5,7 +5,7 @@
  * a knob-paint bug once threw only when a card had a coloured knob — invisible
  * on an idle canvas, fatal on node creation.
  */
-import { act, useLayoutEffect } from 'react'
+import { act, Profiler, useLayoutEffect } from 'react'
 import {
   normalizeWorkflowEdgeSourceHandle,
   normalizeWorkflowEdgeTargetHandle,
@@ -83,26 +83,26 @@ function mount(element: React.ReactElement) {
   return { host, root }
 }
 
-const NO_EDGES: Edge[] = []
-
 function SubflowMountFixture({
   id,
   kind,
   parentId,
-  edges = NO_EDGES,
+  edges,
+  onRender,
 }: {
   id: string
   kind: 'loop' | 'parallel'
   parentId?: string
   edges?: Edge[]
+  onRender?: () => void
 }) {
   const reactFlowStore = useReactFlowStoreApi()
 
   useLayoutEffect(() => {
-    reactFlowStore.setState({ edges })
+    if (edges) reactFlowStore.setState({ edges })
   }, [edges, reactFlowStore])
 
-  return (
+  const view = (
     <SubflowNodeView
       id={id}
       data={{ kind, name: kind === 'loop' ? 'Loop' : 'Parallel', parentId, isPreview: true }}
@@ -114,6 +114,14 @@ function SubflowMountFixture({
       onSelect={() => undefined}
     />
   )
+
+  return onRender ? (
+    <Profiler id={id} onRender={onRender}>
+      {view}
+    </Profiler>
+  ) : (
+    view
+  )
 }
 
 function getSubflowSilhouette(host: HTMLElement, caseName: string) {
@@ -1077,6 +1085,44 @@ describe('WorkflowBlockBorder mount', () => {
     }
   )
 
+  it('does not rerender a nested subflow when unrelated edges change', () => {
+    const baselineRender = vi.fn()
+    const unrelatedEdgeRender = vi.fn()
+    const unrelatedEdges: Edge[] = [
+      {
+        id: 'unrelated-edge',
+        source: 'other-source',
+        sourceHandle: 'source',
+        target: 'other-target',
+        targetHandle: 'target',
+      },
+    ]
+
+    mount(
+      <div>
+        <ReactFlowProvider>
+          <SubflowMountFixture
+            id='baseline-nested-loop'
+            kind='loop'
+            parentId='parent-loop'
+            onRender={baselineRender}
+          />
+        </ReactFlowProvider>
+        <ReactFlowProvider>
+          <SubflowMountFixture
+            id='unrelated-edge-nested-loop'
+            kind='loop'
+            parentId='parent-loop'
+            edges={unrelatedEdges}
+            onRender={unrelatedEdgeRender}
+          />
+        </ReactFlowProvider>
+      </div>
+    )
+
+    expect(unrelatedEdgeRender).toHaveBeenCalledTimes(baselineRender.mock.calls.length)
+  })
+
   it('retracts a selected loop action swell after hover ends', () => {
     vi.useFakeTimers()
     vi.stubGlobal(