Merge pull request #3064 from wbkd/refactor/useUpdateNodeInternals

refactor(useUpdateNodeInternals): only call updateNodeDimensions once

.changeset/twelve-deers-live.md

@@ -0,0 +1,5 @@
+---
+'@reactflow/core': patch
+---
+
+refactor(useUpdateNodeInternals): only call updateNodeDimensions once

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

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(() => {
+      if (nodeElement) {
-      updateIds.forEach((updateId) => {
+        res.push({ id: updateId, nodeElement, forceUpdate: true });
-        const nodeElement = domNode?.querySelector(`.react-flow__node[data-id="${updateId}"]`) as HTMLDivElement;
+      }
 
-        if (nodeElement) {
+      return res;
-          updateNodeDimensions([{ id: updateId, nodeElement, forceUpdate: true }]);
+    }, []);
-        }
+
-      });
+    requestAnimationFrame(() => updateNodeDimensions(updates));
-    });
   }, []);
 }