From 3f8c25209672e06a6e2dc9c57e953b34c43e388c Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Wed, 13 Oct 2021 13:52:45 +0200
Subject: [PATCH] refactor(graphview): use one hook

---
 example/src/Basic/index.tsx       |  2 +-
 example/src/Stress/utils.ts       |  2 +-
 src/container/GraphView/index.tsx | 56 +++++++++++++++++++++----------
 src/index.ts                      |  2 ++
 src/wdyr.ts                       | 10 ++++++
 5 files changed, 53 insertions(+), 19 deletions(-)
 create mode 100644 src/wdyr.ts

diff --git a/example/src/Basic/index.tsx b/example/src/Basic/index.tsx
index 4872d56b..fad5f17d 100644
--- a/example/src/Basic/index.tsx
+++ b/example/src/Basic/index.tsx
@@ -38,7 +38,7 @@ const BasicFlow = () => {
   const onConnect = useCallback((params: Edge | Connection, nds: Node[]) => {
     setEdges((eds) => addEdge(params, nds, eds));
   }, []);
-  const onLoad = (reactFlowInstance: OnLoadParams) => setRfInstance(reactFlowInstance);
+  const onLoad = useCallback((reactFlowInstance: OnLoadParams) => setRfInstance(reactFlowInstance), []);
 
   const updatePos = () => {
     setNodes((nds) => {
diff --git a/example/src/Stress/utils.ts b/example/src/Stress/utils.ts
index 0d2abc90..36cf2949 100644
--- a/example/src/Stress/utils.ts
+++ b/example/src/Stress/utils.ts
@@ -7,7 +7,7 @@ type ElementsCollection = {
 
 export function getElements(xElements: number = 10, yElements: number = 10): ElementsCollection {
   const initialNodes = [];
-  const initialEdges = [];
+  const initialEdges: Edge[] = [];
   let nodeId = 1;
   let recentNodeId = null;
 
diff --git a/src/container/GraphView/index.tsx b/src/container/GraphView/index.tsx
index bfcbf045..358a9dd3 100644
--- a/src/container/GraphView/index.tsx
+++ b/src/container/GraphView/index.tsx
@@ -9,7 +9,7 @@ import useZoomPanHelper from '../../hooks/useZoomPanHelper';
 
 import { ReactFlowProps } from '../ReactFlow';
 
-import { NodeTypesType, EdgeTypesType, ConnectionLineType, KeyCode } from '../../types';
+import { NodeTypesType, EdgeTypesType, ConnectionLineType, KeyCode, ReactFlowState } from '../../types';
 
 export interface GraphViewProps extends Omit<ReactFlowProps, 'onSelectionChange' | 'nodes' | 'edges'> {
   nodeTypes: NodeTypesType;
@@ -27,6 +27,25 @@ export interface GraphViewProps extends Omit<ReactFlowProps, 'onSelectionChange'
   selectNodesOnDrag: boolean;
 }
 
+const selector = (s: ReactFlowState) => ({
+  setOnConnect: s.setOnConnect,
+  setOnConnectStart: s.setOnConnectStart,
+  setOnConnectStop: s.setOnConnectStop,
+  setOnConnectEnd: s.setOnConnectEnd,
+  setSnapGrid: s.setSnapGrid,
+  setSnapToGrid: s.setSnapToGrid,
+  setNodesDraggable: s.setNodesDraggable,
+  setNodesConnectable: s.setNodesConnectable,
+  setElementsSelectable: s.setElementsSelectable,
+  setMinZoom: s.setMinZoom,
+  setMaxZoom: s.setMaxZoom,
+  setTranslateExtent: s.setTranslateExtent,
+  setNodeExtent: s.setNodeExtent,
+  setConnectionMode: s.setConnectionMode,
+  setOnNodesChange: s.setOnNodesChange,
+  setOnEdgesChange: s.setOnEdgesChange,
+});
+
 const GraphView = ({
   nodeTypes,
   edgeTypes,
@@ -99,22 +118,25 @@ const GraphView = ({
 }: GraphViewProps) => {
   const isInitialized = useRef<boolean>(false);
   const store = useStoreApi();
-  const setOnConnect = useStore((s) => s.setOnConnect);
-  const setOnConnectStart = useStore((s) => s.setOnConnectStart);
-  const setOnConnectStop = useStore((s) => s.setOnConnectStop);
-  const setOnConnectEnd = useStore((s) => s.setOnConnectEnd);
-  const setSnapGrid = useStore((s) => s.setSnapGrid);
-  const setSnapToGrid = useStore((s) => s.setSnapToGrid);
-  const setNodesDraggable = useStore((s) => s.setNodesDraggable);
-  const setNodesConnectable = useStore((s) => s.setNodesConnectable);
-  const setElementsSelectable = useStore((s) => s.setElementsSelectable);
-  const setMinZoom = useStore((s) => s.setMinZoom);
-  const setMaxZoom = useStore((s) => s.setMaxZoom);
-  const setTranslateExtent = useStore((s) => s.setTranslateExtent);
-  const setNodeExtent = useStore((s) => s.setNodeExtent);
-  const setConnectionMode = useStore((s) => s.setConnectionMode);
-  const setOnNodesChange = useStore((s) => s.setOnNodesChange);
-  const setOnEdgesChange = useStore((s) => s.setOnEdgesChange);
+
+  const {
+    setOnConnect,
+    setOnConnectStart,
+    setOnConnectStop,
+    setOnConnectEnd,
+    setSnapGrid,
+    setSnapToGrid,
+    setNodesDraggable,
+    setNodesConnectable,
+    setElementsSelectable,
+    setMinZoom,
+    setMaxZoom,
+    setTranslateExtent,
+    setNodeExtent,
+    setConnectionMode,
+    setOnNodesChange,
+    setOnEdgesChange,
+  } = useStore(selector);
 
   const { zoomIn, zoomOut, zoomTo, transform, fitView, initialized } = useZoomPanHelper();
 
diff --git a/src/index.ts b/src/index.ts
index 38713781..ce6e08f1 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,3 +1,5 @@
+// import './wdyr';
+
 import ReactFlow from './container/ReactFlow';
 
 export default ReactFlow;
diff --git a/src/wdyr.ts b/src/wdyr.ts
new file mode 100644
index 00000000..79be3097
--- /dev/null
+++ b/src/wdyr.ts
@@ -0,0 +1,10 @@
+/// <reference types="@welldone-software/why-did-you-render" />
+
+import React from 'react';
+
+if (process.env.NODE_ENV === 'development') {
+  const whyDidYouRender = require('@welldone-software/why-did-you-render');
+  whyDidYouRender(React, {
+    trackAllPureComponents: true,
+  });
+}