From 5e33ac3e8bdff7ebe346be25266ee87719905568 Mon Sep 17 00:00:00 2001
From: peterkogo <peter@xyflow.com>
Date: Thu, 12 Jun 2025 15:50:14 +0200
Subject: [PATCH] fix useNodeConnections callback not firing if
 connections.current not used

---
 .../examples/usenodesdata/ResultNode.svelte   |  9 ++++++
 .../lib/hooks/useNodeConnections.svelte.ts    | 32 ++++++++++++++++---
 2 files changed, 36 insertions(+), 5 deletions(-)

diff --git a/examples/svelte/src/routes/examples/usenodesdata/ResultNode.svelte b/examples/svelte/src/routes/examples/usenodesdata/ResultNode.svelte
index a9f14360..2f9f72bb 100644
--- a/examples/svelte/src/routes/examples/usenodesdata/ResultNode.svelte
+++ b/examples/svelte/src/routes/examples/usenodesdata/ResultNode.svelte
@@ -16,6 +16,15 @@
 		handleType: 'target'
 	});
 
+	useNodeConnections({
+		onConnect: (connection) => {
+			console.log('Connection made:', connection);
+		},
+		onDisconnect: (connection) => {
+			console.log('Connection disconnected:', connection);
+		}
+	});
+
 	let nodeData = $derived(
 		useNodesData<MyNode>(connections.current.map((connection) => connection.source))
 	);
diff --git a/packages/svelte/src/lib/hooks/useNodeConnections.svelte.ts b/packages/svelte/src/lib/hooks/useNodeConnections.svelte.ts
index 111fc715..8e7216b6 100644
--- a/packages/svelte/src/lib/hooks/useNodeConnections.svelte.ts
+++ b/packages/svelte/src/lib/hooks/useNodeConnections.svelte.ts
@@ -17,6 +17,8 @@ type UseNodeConnectionsParams = {
   onDisconnect?: (connections: Connection[]) => void;
 };
 
+type ConnectionMap = Map<string, NodeConnection>;
+
 const initialConnections: NodeConnection[] = [];
 
 /**
@@ -42,26 +44,46 @@ export function useNodeConnections({
   const contextNodeId = getContext<string>('svelteflow__node_id');
   const nodeId = id ?? contextNodeId;
 
-  let prevConnections: Map<string, NodeConnection> = new Map();
+  let connectionMaps: { previous: ConnectionMap; next: ConnectionMap } = {
+    previous: new Map(),
+    next: new Map()
+  };
   let connectionsArray: NodeConnection[] = initialConnections;
 
   const connections = $derived.by(() => {
     // eslint-disable-next-line @typescript-eslint/no-unused-expressions
     edges;
+
+    const prevConnections = connectionMaps.next;
     const nextConnections =
       connectionLookup.get(
         `${nodeId}${handleType ? (handleId ? `-${handleType}-${handleId}` : `-${handleType}`) : ''}`
       ) ?? new Map();
     if (!areConnectionMapsEqual(nextConnections, prevConnections)) {
-      if (onConnect) handleConnectionChange(nextConnections, prevConnections, onConnect);
-      if (onDisconnect) handleConnectionChange(prevConnections, nextConnections, onDisconnect);
-
-      prevConnections = nextConnections;
+      connectionMaps = {
+        previous: prevConnections,
+        next: nextConnections
+      };
       connectionsArray = Array.from(nextConnections.values() || initialConnections);
     }
     return connectionsArray;
   });
 
+  $effect(() => {
+    // We subscribe to changes to the connections only when onConnect/onDisconnect are provided
+    if (onConnect) {
+      // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+      connections;
+      handleConnectionChange(connectionMaps.next, connectionMaps.previous, onConnect);
+    }
+
+    if (onDisconnect) {
+      // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+      connections;
+      handleConnectionChange(connectionMaps.previous, connectionMaps.next, onDisconnect);
+    }
+  });
+
   return {
     get current() {
       return connections;