message: refactor(edgeWrapper): memoize onConnectEdge func
diff: -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}
  