fix(useReactFlow): prevent unnecessary re-renderings

example/package-lock.json

@@ -27,7 +27,7 @@
     },
     "..": {
       "name": "react-flow-renderer",
-      "version": "10.3.13",
+      "version": "10.3.14",
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.18.9",

example/src/CustomNode/index.tsx

@@ -117,7 +117,7 @@ const CustomNodeFlow = () => {
       connectionLineStyle={connectionLineStyle}
       snapToGrid={true}
       snapGrid={snapGrid}
-      defaultZoom={0.3}
+      fitView
       minZoom={0.3}
       maxZoom={2}
     >

example/src/UseReactFlow/index.tsx

@@ -86,7 +86,7 @@ const UseZoomPanHelperFlow = () => {
   const logNodes = useCallback(() => {
     console.log('nodes', getNodes());
     console.log('edges', getEdges());
-  }, [getNodes]);
+  }, [getNodes, getEdges]);
 
   useEffect(() => {
     addEdges({ id: 'e3-4', source: '3', target: '4' });

src/hooks/useReactFlow.ts

@@ -1,4 +1,4 @@
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
 
 import useViewportHelper from './useViewportHelper';
 import { useStoreApi } from '../store';
@@ -14,7 +14,7 @@ import {
 } from '../types';
 
 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>>(() => {
@@ -110,17 +110,18 @@ export default function useReactFlow<NodeData = any, EdgeData = any>(): ReactFlo
     };
   }, []);
 
-  return {
+  return useMemo(() => {
-    ...viewportHelperFunctions,
+    return {
-    viewportInitialized,
+      ...viewportHelper,
-    getNodes,
+      getNodes,
-    getNode,
+      getNode,
-    getEdges,
+      getEdges,
-    getEdge,
+      getEdge,
-    setNodes,
+      setNodes,
-    setEdges,
+      setEdges,
-    addNodes,
+      addNodes,
-    addEdges,
+      addEdges,
-    toObject,
+      toObject,
-  };
+    };
+  }, [viewportHelper, getNodes, getNode, getEdges, getEdge, setNodes, setEdges, addNodes, addEdges, toObject]);
 }

src/hooks/useViewportHelper.ts

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

src/types/general.ts

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