Merge branch 'main' into feat/hooks

packages/core/src/hooks/useReactFlow.ts

@@ -1,4 +1,4 @@
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
 
 import useViewportHelper from './useViewportHelper';
 import { useStoreApi } from '../hooks/useStore';
@@ -15,7 +15,7 @@ import {
 
 /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 export default function useReactFlow<NodeData = any, EdgeData = any>(): ReactFlowInstance<NodeData, EdgeData> {
-  const { initialized: viewportInitialized, ...viewportHelperFunctions } = useViewportHelper();
+  const viewportHelper = useViewportHelper();
   const store = useStoreApi();
 
   const getNodes = useCallback<Instance.GetNodes<NodeData>>(() => {
@@ -111,17 +111,18 @@ export default function useReactFlow<NodeData = any, EdgeData = any>(): ReactFlo
     };
   }, []);
 
-  return {
-    ...viewportHelperFunctions,
-    viewportInitialized,
-    getNodes,
-    getNode,
-    getEdges,
-    getEdge,
-    setNodes,
-    setEdges,
-    addNodes,
-    addEdges,
-    toObject,
-  };
+  return useMemo(() => {
+    return {
+      ...viewportHelper,
+      getNodes,
+      getNode,
+      getEdges,
+      getEdge,
+      setNodes,
+      setEdges,
+      addNodes,
+      addEdges,
+      toObject,
+    };
+  }, [viewportHelper, getNodes, getNode, getEdges, getEdge, setNodes, setEdges, addNodes, addEdges, toObject]);
 }

packages/core/src/hooks/useUpdateNodeInternals.ts

@@ -10,15 +10,10 @@ function useUpdateNodeInternals(): UpdateNodeInternals {
   const updateNodeDimensions = useStore(selector);
 
   return useCallback<UpdateNodeInternals>((id: string) => {
-    const { domNode } = store.getState();
-    if (!domNode) {
-      return;
-    }
-
-    const nodeElement = domNode.querySelector(`.react-flow__node[data-id="${id}"]`) as HTMLDivElement;
+    const nodeElement = store.getState().domNode?.querySelector(`.react-flow__node[data-id="${id}"]`) as HTMLDivElement;
 
     if (nodeElement) {
-      updateNodeDimensions([{ id, nodeElement, forceUpdate: true }]);
+      requestAnimationFrame(() => updateNodeDimensions([{ id, nodeElement, forceUpdate: true }]));
     }
   }, []);
 }

packages/core/src/hooks/useViewportHelper.ts

@@ -21,7 +21,7 @@ const initialViewportHelper: ViewportHelperFunctions = {
   setCenter: noop,
   fitBounds: noop,
   project: (position: XYPosition) => position,
-  initialized: false,
+  viewportInitialized: false,
 };
 
 const selector = (s: ReactFlowState) => ({
@@ -72,7 +72,7 @@ const useViewportHelper = (): ViewportHelperFunctions => {
           const { transform, snapToGrid, snapGrid } = store.getState();
           return pointToRendererPoint(position, transform, snapToGrid, snapGrid);
         },
-        initialized: true,
+        viewportInitialized: true,
       };
     }
 

packages/core/src/types/general.ts

@@ -125,7 +125,7 @@ export interface ViewportHelperFunctions {
   setCenter: SetCenter;
   fitBounds: FitBounds;
   project: Project;
-  initialized: boolean;
+  viewportInitialized: boolean;
 }
 
 export type ReactFlowStore = {