Merge branch 'main' into feat/packages

packages/core/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @reactflow/core
 
+## 11.7.2
+
+### Patch Changes
+
+- [#3060](https://github.com/wbkd/react-flow/pull/3060) [`70ec97f7`](https://github.com/wbkd/react-flow/commit/70ec97f7daec6d5401215cae3edac04aea88a3ba) - fix useNodes and useEdges bug with infinite re-renderings
+- [#3064](https://github.com/wbkd/react-flow/pull/3064) [`d2d1aebc`](https://github.com/wbkd/react-flow/commit/d2d1aebc0f7fea4183406e7d1915b7fcd6995f48) - refactor(useUpdateNodeInternals): only call updateNodeDimensions once
+- [#3059](https://github.com/wbkd/react-flow/pull/3059) [`4374459e`](https://github.com/wbkd/react-flow/commit/4374459ef9fec797bbc0407231f09a1acacd245b) - fix useUpdateNodeInternals type
+
 ## 11.7.1
 
 ### Patch Changes

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reactflow/core",
-  "version": "11.7.1",
+  "version": "11.7.2",
   "description": "Core components and util functions of React Flow.",
   "keywords": [
     "react",

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));
   }, []);
 }