From 1a3f22557ce8c5b81bbf86ef4e9dda2ad610b289 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Wed, 17 May 2023 11:00:18 +0200
Subject: [PATCH 1/2] refactor(useUpdateNodeInternals): only call
 updateNodeDimensions once

---
 .../UseUpdateNodeInternals/CustomNode.tsx     |  2 +-
 .../core/src/hooks/useUpdateNodeInternals.ts  | 19 ++++++++++---------
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/examples/vite-app/src/examples/UseUpdateNodeInternals/CustomNode.tsx b/examples/vite-app/src/examples/UseUpdateNodeInternals/CustomNode.tsx
index 1b25bdc1..a11c68d0 100644
--- a/examples/vite-app/src/examples/UseUpdateNodeInternals/CustomNode.tsx
+++ b/examples/vite-app/src/examples/UseUpdateNodeInternals/CustomNode.tsx
@@ -23,7 +23,7 @@ const CustomNode: FC<NodeProps> = ({ id }) => {
       <button
         onClick={() => {
           setHandleCount((c) => c + 1);
-          updateNodeInternals(id);
+          updateNodeInternals([id]);
         }}
       >
         add handle
diff --git a/packages/core/src/hooks/useUpdateNodeInternals.ts b/packages/core/src/hooks/useUpdateNodeInternals.ts
index 9786c65c..0047c7e8 100644
--- a/packages/core/src/hooks/useUpdateNodeInternals.ts
+++ b/packages/core/src/hooks/useUpdateNodeInternals.ts
@@ -1,7 +1,7 @@
 import { useCallback } from 'react';
 
 import { useStoreApi } from '../hooks/useStore';
-import type { UpdateNodeInternals } from '../types';
+import type { NodeDimensionUpdate, UpdateNodeInternals } from '../types';
 
 function useUpdateNodeInternals(): UpdateNodeInternals {
   const store = useStoreApi();
@@ -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));
   }, []);
 }
 

From d2d1aebc0f7fea4183406e7d1915b7fcd6995f48 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Wed, 17 May 2023 11:01:47 +0200
Subject: [PATCH 2/2] chore(changeset): add

---
 .changeset/twelve-deers-live.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/twelve-deers-live.md

diff --git a/.changeset/twelve-deers-live.md b/.changeset/twelve-deers-live.md
new file mode 100644
index 00000000..d37437e8
--- /dev/null
+++ b/.changeset/twelve-deers-live.md
@@ -0,0 +1,5 @@
+---
+'@reactflow/core': patch
+---
+
+refactor(useUpdateNodeInternals): only call updateNodeDimensions once