chore(node-toolbar): cleanup

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 = useStore(selectedNodesSelector);
-  const selectedNodeIds = nodes.filter((node) => node.selected).map((node) => node.id);
   const isVisible = selectedNodeIds.length > 1;
 
   return (
     <NodeToolbar nodeId={selectedNodeIds} isVisible={isVisible}>
-      <button>Group selected nodes</button>
+      <button>Selection action</button>
     </NodeToolbar>
   );
 }

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[] =>
+    (state: ReactFlowState): Node[] => {
-      nodeIds.reduce<Node[]>((acc, id) => {
+      const nodeIds: string[] = typeof nodeId === 'string' ? [nodeId] : nodeId;
+
+      return nodeIds.reduce<Node[]>((acc, id) => {
         const node = state.nodeInternals.get(id);
         if (node) {
           acc.push(node);
         }
         return acc;
-      }, [] as Node[]),
+      }, [] as Node[]);
-    [nodeIds]
+    },
+    [nodeId]
   );
   const nodes = useStore(nodesSelector, nodesEqualityFn);
   const { transform, nodeOrigin, selectedNodesCount } = useStore(storeSelector, shallow);