refactor(edgeWrapper): memoize onConnectEdge func

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(
+interface EdgeWrapperProps {
-  edge: Edge,
+  edge: Edge;
-  props: EdgeRendererProps,
+  props: EdgeRendererProps;
-  nodes: Node[],
+  nodes: Node[];
-  selectedElements: Elements | null,
+  selectedElements: Elements | null;
-  elementsSelectable: boolean,
+  elementsSelectable: boolean;
-  transform: Transform,
+  transform: Transform;
-  width: number,
+  width: number;
-  height: number,
+  height: number;
-  onlyRenderVisibleElements: boolean
+  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) =>
+        {edges.map((edge: Edge) => (
-          renderEdge(
+          <Edge
-            edge,
+            key={edge.id}
-            props,
+            edge={edge}
-            nodes,
+            props={props}
-            selectedElements,
+            nodes={nodes}
-            elementsSelectable,
+            selectedElements={selectedElements}
-            transform,
+            elementsSelectable={elementsSelectable}
-            width,
+            transform={transform}
-            height,
+            width={width}
-            onlyRenderVisibleElements
+            height={height}
-          )
+            onlyRenderVisibleElements={onlyRenderVisibleElements}
-        )}
+          />
+        ))}
         {renderConnectionLine && (
           <ConnectionLine
             nodes={nodes}