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);