diff --git a/.changeset/perfect-nails-cover.md b/.changeset/perfect-nails-cover.md
new file mode 100644
index 00000000..58680cb1
--- /dev/null
+++ b/.changeset/perfect-nails-cover.md
@@ -0,0 +1,5 @@
+---
+'@xyflow/system': patch
+---
+
+fix(connection) snapped position not updated correctly
diff --git a/examples/react/src/examples/EasyConnect/CustomNode.tsx b/examples/react/src/examples/EasyConnect/CustomNode.tsx
index 7d3d6d67..03726da2 100644
--- a/examples/react/src/examples/EasyConnect/CustomNode.tsx
+++ b/examples/react/src/examples/EasyConnect/CustomNode.tsx
@@ -1,13 +1,10 @@
-import { Handle, NodeProps, Position, ReactFlowState, useStore } from '@xyflow/react';
-
-const connectionNodeIdSelector = (state: ReactFlowState) => state.connectionStartHandle?.nodeId;
+import { Handle, NodeProps, Position, useConnection } from '@xyflow/react';
 
 export default function CustomNode({ id }: NodeProps) {
-  const connectionNodeId = useStore(connectionNodeIdSelector);
-  const isConnecting = !!connectionNodeId;
-  const isTarget = connectionNodeId && connectionNodeId !== id;
+  const connection = useConnection();
+
+  const isTarget = connection.inProgress && connection.fromNode.id !== id;
 
-  const targetHandleStyle = { zIndex: isTarget ? 3 : 1 };
   const label = isTarget ? 'Drop here' : 'Drag to connect';
 
   return (
@@ -19,17 +16,13 @@ export default function CustomNode({ id }: NodeProps) {
           backgroundColor: isTarget ? '#ffcce3' : '#ccd9f6',
         }}
       >
-        {!isConnecting && (
-          <Handle className="customHandle" style={{ zIndex: 2 }} position={Position.Right} type="source" />
-        )}
+        {/* If handles are conditionally rendered and not present initially, you need to update the node internals https://reactflow.dev/docs/api/hooks/use-update-node-internals/ */}
+        {/* In this case we don't need to use useUpdateNodeInternals, since !connection.inProgress is true at the beginning and all handles are rendered initially. */}
+        {!connection.inProgress && <Handle className="customHandle" position={Position.Right} type="source" id="src" />}
 
-        <Handle
-          className="customHandle"
-          style={targetHandleStyle}
-          position={Position.Left}
-          type="target"
-          isConnectableStart={false}
-        />
+        {/* We want to disable the target handle, if the connection was started from this node */}
+        {/* {(!connection.inProgress || isTarget) && ( */}
+        <Handle className="customHandle" position={Position.Left} type="target" isConnectableStart={false} id="trgt" />
         {label}
       </div>
     </div>
diff --git a/examples/react/src/examples/EasyConnect/FloatingEdge.tsx b/examples/react/src/examples/EasyConnect/FloatingEdge.tsx
index 48d621e7..a35398bc 100644
--- a/examples/react/src/examples/EasyConnect/FloatingEdge.tsx
+++ b/examples/react/src/examples/EasyConnect/FloatingEdge.tsx
@@ -1,5 +1,4 @@
-import { useCallback } from 'react';
-import { useStore, getStraightPath, EdgeProps, useInternalNode } from '@xyflow/react';
+import { EdgeProps, getStraightPath, useInternalNode } from '@xyflow/react';
 
 import { getEdgeParams } from './utils.js';
 
diff --git a/examples/react/src/examples/EasyConnect/index.tsx b/examples/react/src/examples/EasyConnect/index.tsx
index 11e347f1..bf3e50df 100644
--- a/examples/react/src/examples/EasyConnect/index.tsx
+++ b/examples/react/src/examples/EasyConnect/index.tsx
@@ -1,5 +1,15 @@
 import { useCallback } from 'react';
-import { ReactFlow, Node, Edge, addEdge, useNodesState, useEdgesState, MarkerType, OnConnect } from '@xyflow/react';
+import {
+  ReactFlow,
+  Node,
+  Edge,
+  addEdge,
+  useNodesState,
+  useEdgesState,
+  MarkerType,
+  OnConnect,
+  ConnectionMode,
+} from '@xyflow/react';
 
 import CustomNode from './CustomNode';
 import FloatingEdge from './FloatingEdge';
diff --git a/examples/react/src/examples/EasyConnect/utils.tsx b/examples/react/src/examples/EasyConnect/utils.tsx
index f9667f23..587de9c1 100644
--- a/examples/react/src/examples/EasyConnect/utils.tsx
+++ b/examples/react/src/examples/EasyConnect/utils.tsx
@@ -19,12 +19,11 @@ function getNodeIntersection(intersectionNode: InternalNode, targetNode: Interna
 
   const xx1 = (x1 - x2) / (2 * w) - (y1 - y2) / (2 * h);
   const yy1 = (x1 - x2) / (2 * w) + (y1 - y2) / (2 * h);
-  const a = 1 / (Math.abs(xx1) + Math.abs(yy1));
+  const a = 1 / (Math.abs(xx1) + Math.abs(yy1) || 1);
   const xx3 = a * xx1;
   const yy3 = a * yy1;
   const x = w * (xx3 + yy3) + x2;
   const y = h * (-xx3 + yy3) + y2;
-
   return { x, y };
 }
 
diff --git a/packages/system/src/xyhandle/XYHandle.ts b/packages/system/src/xyhandle/XYHandle.ts
index e971a22b..0136479d 100644
--- a/packages/system/src/xyhandle/XYHandle.ts
+++ b/packages/system/src/xyhandle/XYHandle.ts
@@ -175,7 +175,9 @@ function onPointerDown(
       newConnection.toHandle &&
       previousConnection.toHandle.type === newConnection.toHandle.type &&
       previousConnection.toHandle.nodeId === newConnection.toHandle.nodeId &&
-      previousConnection.toHandle.id === newConnection.toHandle.id
+      previousConnection.toHandle.id === newConnection.toHandle.id &&
+      previousConnection.to.x === newConnection.to.x &&
+      previousConnection.to.y === newConnection.to.y
     ) {
       return;
     }