From 03d5e6337180ba4971c2f5ec21c372c4130497e3 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Thu, 26 Nov 2020 15:55:46 +0100
Subject: [PATCH] refactor(edgeWrapper): memoize onConnectEdge func

---
 src/container/EdgeRenderer/index.tsx | 76 +++++++++++++++++-----------
 1 file changed, 46 insertions(+), 30 deletions(-)

diff --git a/src/container/EdgeRenderer/index.tsx b/src/container/EdgeRenderer/index.tsx
index 6e0f0cad..6d6453cf 100644
--- a/src/container/EdgeRenderer/index.tsx
+++ b/src/container/EdgeRenderer/index.tsx
@@ -1,4 +1,4 @@
-import React, { memo, CSSProperties } from 'react';
+import React, { memo, CSSProperties, useCallback } from 'react';
 
 import { useStoreState } from '../../store/hooks';
 import ConnectionLine from '../../components/ConnectionLine/index';
@@ -29,21 +29,40 @@ interface EdgeRendererProps {
   onEdgeUpdate?: OnEdgeUpdateFunc;
 }
 
-function renderEdge(
-  edge: Edge,
-  props: EdgeRendererProps,
-  nodes: Node[],
-  selectedElements: Elements | null,
-  elementsSelectable: boolean,
-  transform: Transform,
-  width: number,
-  height: number,
-  onlyRenderVisibleElements: boolean
-) {
+interface EdgeWrapperProps {
+  edge: Edge;
+  props: EdgeRendererProps;
+  nodes: Node[];
+  selectedElements: Elements | null;
+  elementsSelectable: boolean;
+  transform: Transform;
+  width: number;
+  height: number;
+  onlyRenderVisibleElements: boolean;
+}
+
+const Edge = ({
+  edge,
+  props,
+  nodes,
+  selectedElements,
+  elementsSelectable,
+  transform,
+  width,
+  height,
+  onlyRenderVisibleElements,
+}: EdgeWrapperProps) => {
   const sourceHandleId = edge.sourceHandle || null;
   const targetHandleId = edge.targetHandle || null;
   const { sourceNode, targetNode } = getSourceTargetNodes(edge, nodes);
 
+  const onConnectEdge = useCallback(
+    (connection: Connection) => {
+      props.onEdgeUpdate?.(edge, connection);
+    },
+    [edge]
+  );
+
   if (!sourceNode) {
     console.warn(`couldn't create edge for source id: ${edge.source}; edge id: ${edge.id}`);
     return null;
@@ -100,10 +119,6 @@ function renderEdge(
 
   const isSelected = selectedElements?.some((elm) => isEdge(elm) && elm.id === edge.id) || false;
 
-  const onConnectEdge = (connection: Connection) => {
-    props.onEdgeUpdate?.(edge, connection);
-  };
-
   return (
     <EdgeComponent
       key={edge.id}
@@ -139,7 +154,7 @@ function renderEdge(
       handleEdgeUpdate={typeof props.onEdgeUpdate !== 'undefined'}
     />
   );
-}
+};
 
 const EdgeRenderer = (props: EdgeRendererProps) => {
   const transform = useStoreState((state) => state.transform);
@@ -173,19 +188,20 @@ const EdgeRenderer = (props: EdgeRendererProps) => {
     <svg width={width} height={height} className="react-flow__edges">
       <MarkerDefinitions color={arrowHeadColor} />
       <g transform={transformStyle}>
-        {edges.map((edge: Edge) =>
-          renderEdge(
-            edge,
-            props,
-            nodes,
-            selectedElements,
-            elementsSelectable,
-            transform,
-            width,
-            height,
-            onlyRenderVisibleElements
-          )
-        )}
+        {edges.map((edge: Edge) => (
+          <Edge
+            key={edge.id}
+            edge={edge}
+            props={props}
+            nodes={nodes}
+            selectedElements={selectedElements}
+            elementsSelectable={elementsSelectable}
+            transform={transform}
+            width={width}
+            height={height}
+            onlyRenderVisibleElements={onlyRenderVisibleElements}
+          />
+        ))}
         {renderConnectionLine && (
           <ConnectionLine
             nodes={nodes}