refactor(svelte): prevent unnecessary re-renders for node updates, selected always boolean #3336

packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte

@@ -42,7 +42,7 @@
     <NodeWrapper
       id={node.id}
       data={node.data}
-      selected={node.selected}
+      selected={!!node.selected}
       draggable={!!(node.draggable || ($nodesDraggable && typeof node.draggable === 'undefined'))}
       selectable={!!(
         node.selectable ||

packages/svelte/src/lib/container/Pane/Pane.svelte

@@ -114,6 +114,8 @@
       width: Math.abs(mousePos.x - startX),
       height: Math.abs(mousePos.y - startY)
     };
+    const prevSelectedNodeIds = selectedNodes.map((n) => n.id);
+    const prevSelectedEdgeIds = getConnectedEdges(selectedNodes, $edges).map((e) => e.id);
 
     selectedNodes = getNodesInside<Node>(
       $nodes,
@@ -125,8 +127,20 @@
     const selectedEdgeIds = getConnectedEdges(selectedNodes, $edges).map((e) => e.id);
     const selectedNodeIds = selectedNodes.map((n) => n.id);
 
-    nodes.update((nodes) => nodes.map(toggleSelected(selectedNodeIds)));
-    edges.update((edges) => edges.map(toggleSelected(selectedEdgeIds)));
+    // this prevents unnecessary updates while updating the selection rectangle
+    if (
+      prevSelectedNodeIds.length !== selectedNodeIds.length ||
+      selectedNodeIds.some((id) => !prevSelectedNodeIds.includes(id))
+    ) {
+      nodes.update((nodes) => nodes.map(toggleSelected(selectedNodeIds)));
+    }
+
+    if (
+      prevSelectedEdgeIds.length !== selectedEdgeIds.length ||
+      selectedEdgeIds.some((id) => !prevSelectedEdgeIds.includes(id))
+    ) {
+      edges.update((edges) => edges.map(toggleSelected(selectedEdgeIds)));
+    }
 
     selectionRectMode.set('user');
     selectionRect.set(nextUserSelectRect);

packages/svelte/src/lib/store/index.ts

@@ -174,8 +174,13 @@ export function createStore(): SvelteFlowStore {
   }
 
   function unselectNodesAndEdges() {
-    store.nodes.update((ns) => ns.map(resetSelectedItem));
-    store.edges.update((es) => es.map(resetSelectedItem));
+    if (get(store.nodes).some((node) => node.selected)) {
+      store.nodes.update((ns) => ns.map(resetSelectedItem));
+    }
+
+    if (get(store.edges).some((edge) => edge.selected)) {
+      store.edges.update((es) => es.map(resetSelectedItem));
+    }
   }
 
   store.deleteKeyPressed.subscribe((deleteKeyPressed) => {