From bb00e871c022d108797b149ac26295f3fb08c14a Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Tue, 16 Aug 2022 12:44:47 +0200
Subject: [PATCH] fix(useReactFlow): prevent unnecessary re-renderings

---
 example/package-lock.json          |  2 +-
 example/src/CustomNode/index.tsx   |  2 +-
 example/src/UseReactFlow/index.tsx |  2 +-
 src/hooks/useReactFlow.ts          | 31 +++++++++++++++---------------
 src/hooks/useViewportHelper.ts     |  4 ++--
 src/types/general.ts               |  2 +-
 6 files changed, 22 insertions(+), 21 deletions(-)

diff --git a/example/package-lock.json b/example/package-lock.json
index d96748fc..1837351b 100644
--- a/example/package-lock.json
+++ b/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",
diff --git a/example/src/CustomNode/index.tsx b/example/src/CustomNode/index.tsx
index d867a9c4..3f4fd3f9 100644
--- a/example/src/CustomNode/index.tsx
+++ b/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}
     >
diff --git a/example/src/UseReactFlow/index.tsx b/example/src/UseReactFlow/index.tsx
index e9553bf3..41d6ec9e 100644
--- a/example/src/UseReactFlow/index.tsx
+++ b/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' });
diff --git a/src/hooks/useReactFlow.ts b/src/hooks/useReactFlow.ts
index 69d25cb9..3bffe8fa 100644
--- a/src/hooks/useReactFlow.ts
+++ b/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]);
 }
diff --git a/src/hooks/useViewportHelper.ts b/src/hooks/useViewportHelper.ts
index 10e21193..d5e95979 100644
--- a/src/hooks/useViewportHelper.ts
+++ b/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,
       };
     }
 
diff --git a/src/types/general.ts b/src/types/general.ts
index ac0814f8..5caf5385 100644
--- a/src/types/general.ts
+++ b/src/types/general.ts
@@ -130,7 +130,7 @@ export interface ViewportHelperFunctions {
   setCenter: SetCenter;
   fitBounds: FitBounds;
   project: Project;
-  initialized: boolean;
+  viewportInitialized: boolean;
 }
 
 export type ReactFlowStore = {