fix(useReactFlow): prevent unnecessary re-renderings

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 {
-    ...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]);
 }

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 = {