refactor(updates): only trigger dim updates when dim changed

packages/react/src/components/NodeWrapper/index.tsx

@@ -123,7 +123,7 @@ export function NodeWrapper<NodeType extends Node>({
       if (targetPosChanged) {
         prevTargetPosition.current = node.targetPosition;
       }
-      store.getState().updateNodeDimensions(new Map([[id, { id, nodeElement: nodeRef.current, force: true }]]));
+      store.getState().updateNodeInternals(new Map([[id, { id, nodeElement: nodeRef.current, force: true }]]));
     }
   }, [id, nodeType, node.sourcePosition, node.targetPosition]);
 

packages/react/src/container/NodeRenderer/useResizeObserver.ts

@@ -2,12 +2,12 @@ import { useEffect, useMemo, useRef } from 'react';
 
 import { ReactFlowState } from '../../types';
 import { useStore } from '../../hooks/useStore';
-import { NodeDimensionUpdate } from '@xyflow/system';
+import { InternalNodeUpdate } from '@xyflow/system';
 
-const selector = (s: ReactFlowState) => s.updateNodeDimensions;
+const selector = (s: ReactFlowState) => s.updateNodeInternals;
 
 export function useResizeObserver() {
-  const updateNodeDimensions = useStore(selector);
+  const updateNodeInternals = useStore(selector);
   const resizeObserverRef = useRef<ResizeObserver>();
 
   const resizeObserver = useMemo(() => {
@@ -16,7 +16,7 @@ export function useResizeObserver() {
     }
 
     const observer = new ResizeObserver((entries: ResizeObserverEntry[]) => {
-      const updates = new Map<string, NodeDimensionUpdate>();
+      const updates = new Map<string, InternalNodeUpdate>();
 
       entries.forEach((entry: ResizeObserverEntry) => {
         const id = entry.target.getAttribute('data-id') as string;
@@ -26,7 +26,7 @@ export function useResizeObserver() {
         });
       });
 
-      updateNodeDimensions(updates);
+      updateNodeInternals(updates);
     });
 
     resizeObserverRef.current = observer;

packages/react/src/hooks/useUpdateNodeInternals.ts

@@ -1,5 +1,5 @@
 import { useCallback } from 'react';
-import type { UpdateNodeInternals, NodeDimensionUpdate } from '@xyflow/system';
+import type { UpdateNodeInternals, InternalNodeUpdate } from '@xyflow/system';
 
 import { useStoreApi } from '../hooks/useStore';
 
@@ -13,9 +13,9 @@ export function useUpdateNodeInternals(): UpdateNodeInternals {
   const store = useStoreApi();
 
   return useCallback<UpdateNodeInternals>((id: string | string[]) => {
-    const { domNode, updateNodeDimensions } = store.getState();
+    const { domNode, updateNodeInternals } = store.getState();
     const updateIds = Array.isArray(id) ? id : [id];
-    const updates = new Map<string, NodeDimensionUpdate>();
+    const updates = new Map<string, InternalNodeUpdate>();
 
     updateIds.forEach((updateId) => {
       const nodeElement = domNode?.querySelector(`.react-flow__node[data-id="${updateId}"]`) as HTMLDivElement;
@@ -25,6 +25,6 @@ export function useUpdateNodeInternals(): UpdateNodeInternals {
       }
     });
 
-    requestAnimationFrame(() => updateNodeDimensions(updates));
+    requestAnimationFrame(() => updateNodeInternals(updates));
   }, []);
 }

packages/react/src/store/index.ts

@@ -5,7 +5,7 @@ import {
   adoptUserNodes,
   updateAbsolutePositions,
   panBy as panBySystem,
-  updateNodeDimensions as updateNodeDimensionsSystem,
+  updateNodeInternals as updateNodeInternalsSystem,
   updateConnectionLookup,
   handleParentExpand,
   NodeChange,
@@ -71,7 +71,7 @@ const createRFStore = ({
       // Every node gets registerd at a ResizeObserver. Whenever a node
       // changes its dimensions, this function is called to measure the
       // new dimensions and update the nodes.
-      updateNodeDimensions: (updates) => {
+      updateNodeInternals: (updates) => {
         const {
           onNodesChange,
           fitView,
@@ -84,9 +84,9 @@ const createRFStore = ({
           debug,
         } = get();
 
-        const changes = updateNodeDimensionsSystem(updates, nodeLookup, domNode, nodeOrigin);
+        const { changes, updatedInternals } = updateNodeInternalsSystem(updates, nodeLookup, domNode, nodeOrigin);
 
-        if (changes.length === 0) {
+        if (!updatedInternals) {
           return;
         }
 

packages/react/src/types/store.ts

@@ -2,7 +2,7 @@ import {
   ConnectionMode,
   type ConnectionStatus,
   type CoordinateExtent,
-  type NodeDimensionUpdate,
+  type InternalNodeUpdate,
   type UpdateNodePositions,
   type NodeOrigin,
   type OnConnect,
@@ -154,7 +154,7 @@ export type ReactFlowActions<NodeType extends Node, EdgeType extends Edge> = {
   setNodes: (nodes: NodeType[]) => void;
   setEdges: (edges: EdgeType[]) => void;
   setDefaultNodesAndEdges: (nodes?: NodeType[], edges?: EdgeType[]) => void;
-  updateNodeDimensions: (updates: Map<string, NodeDimensionUpdate>) => void;
+  updateNodeInternals: (updates: Map<string, InternalNodeUpdate>) => void;
   updateNodePositions: UpdateNodePositions;
   resetSelectedElements: () => void;
   unselectNodesAndEdges: (params?: UnselectNodesAndEdgesParams) => void;