Merge branch 'main' into feat/packages

packages/core/src/hooks/useEdges.ts

@@ -1,10 +1,12 @@
+import { shallow } from 'zustand/shallow';
+
 import { useStore } from '../hooks/useStore';
 import type { Edge, ReactFlowState } from '../types';
 
 const edgesSelector = (state: ReactFlowState) => state.edges;
 
 function useEdges<EdgeData>(): Edge<EdgeData>[] {
-  const edges = useStore(edgesSelector);
+  const edges = useStore(edgesSelector, shallow);
 
   return edges;
 }

packages/core/src/hooks/useNodes.ts

@@ -1,3 +1,5 @@
+import { shallow } from 'zustand/shallow';
+
 import { useStore } from '../hooks/useStore';
 
 import type { Node, ReactFlowState } from '../types';
@@ -5,7 +7,7 @@ import type { Node, ReactFlowState } from '../types';
 const nodesSelector = (state: ReactFlowState) => state.getNodes();
 
 function useNodes<NodeData>(): Node<NodeData>[] {
-  const nodes = useStore(nodesSelector);
+  const nodes = useStore(nodesSelector, shallow);
 
   return nodes;
 }

packages/core/src/hooks/useUpdateNodeInternals.ts

@@ -1,5 +1,5 @@
 import { useCallback } from 'react';
-import type { UpdateNodeInternals } from '@reactflow/system';
+import type { UpdateNodeInternals, NodeDimensionUpdate } from '@reactflow/system';
 
 import { useStoreApi } from '../hooks/useStore';
 
@@ -10,16 +10,17 @@ function useUpdateNodeInternals(): UpdateNodeInternals {
     const { domNode, updateNodeDimensions } = store.getState();
 
     const updateIds = Array.isArray(id) ? id : [id];
+    const updates = updateIds.reduce<NodeDimensionUpdate[]>((res, updateId) => {
+      const nodeElement = domNode?.querySelector(`.react-flow__node[data-id="${updateId}"]`) as HTMLDivElement;
 
-    requestAnimationFrame(() => {
-      updateIds.forEach((updateId) => {
-        const nodeElement = domNode?.querySelector(`.react-flow__node[data-id="${updateId}"]`) as HTMLDivElement;
+      if (nodeElement) {
+        res.push({ id: updateId, nodeElement, forceUpdate: true });
+      }
 
-        if (nodeElement) {
-          updateNodeDimensions([{ id: updateId, nodeElement, forceUpdate: true }]);
-        }
-      });
-    });
+      return res;
+    }, []);
+
+    requestAnimationFrame(() => updateNodeDimensions(updates));
   }, []);
 }