diff --git a/examples/vite-app/src/examples/NodeToolbar/SelectedNodesToolbar.tsx b/examples/vite-app/src/examples/NodeToolbar/SelectedNodesToolbar.tsx
index 9c0db9cc..349db385 100644
--- a/examples/vite-app/src/examples/NodeToolbar/SelectedNodesToolbar.tsx
+++ b/examples/vite-app/src/examples/NodeToolbar/SelectedNodesToolbar.tsx
@@ -1,13 +1,17 @@
-import { NodeToolbar, useNodes } from 'reactflow';
+import { NodeToolbar, ReactFlowState, useStore } from 'reactflow';
+
+const selectedNodesSelector = (state: ReactFlowState) =>
+ Array.from(state.nodeInternals.values())
+ .filter((node) => node.selected)
+ .map((node) => node.id);
export default function SelectedNodesToolbar() {
- const nodes = useNodes();
- const selectedNodeIds = nodes.filter((node) => node.selected).map((node) => node.id);
+ const selectedNodeIds = useStore(selectedNodesSelector);
const isVisible = selectedNodeIds.length > 1;
return (
-
+
);
}
diff --git a/packages/node-toolbar/src/NodeToolbar.tsx b/packages/node-toolbar/src/NodeToolbar.tsx
index 66ebd618..1dfd7669 100644
--- a/packages/node-toolbar/src/NodeToolbar.tsx
+++ b/packages/node-toolbar/src/NodeToolbar.tsx
@@ -72,17 +72,19 @@ function NodeToolbar({
offset = 10,
...rest
}: NodeToolbarProps) {
- const nodeIds: string[] = typeof nodeId === 'string' ? [nodeId] : nodeId;
const nodesSelector = useCallback(
- (state: ReactFlowState): Node[] =>
- nodeIds.reduce((acc, id) => {
+ (state: ReactFlowState): Node[] => {
+ const nodeIds: string[] = typeof nodeId === 'string' ? [nodeId] : nodeId;
+
+ return nodeIds.reduce((acc, id) => {
const node = state.nodeInternals.get(id);
if (node) {
acc.push(node);
}
return acc;
- }, [] as Node[]),
- [nodeIds]
+ }, [] as Node[]);
+ },
+ [nodeId]
);
const nodes = useStore(nodesSelector, nodesEqualityFn);
const { transform, nodeOrigin, selectedNodesCount } = useStore(storeSelector, shallow);