refactor(components): show displayName in react profiler correctly

src/additional-components/Background/index.tsx

@@ -19,8 +19,14 @@ const defaultColors = {
   [BackgroundVariant.Lines]: '#eee',
 };
 
-const Background = memo(
+const Background = ({
-  ({ variant = BackgroundVariant.Dots, gap = 24, size = 0.5, color, style, className }: BackgroundProps) => {
+  variant = BackgroundVariant.Dots,
+  gap = 24,
+  size = 0.5,
+  color,
+  style,
+  className,
+}: BackgroundProps) => {
   const [x, y, scale] = useStoreState((s) => s.transform);
 
   const bgClasses = cc(['react-flow__background', className]);
@@ -48,9 +54,8 @@ const Background = memo(
       }}
     ></div>
   );
-  }
+};
-);
 
 Background.displayName = 'Background';
 
-export default Background;
+export default memo(Background);

src/additional-components/Controls/index.tsx

@@ -17,8 +17,7 @@ interface ControlProps extends React.HTMLAttributes<HTMLDivElement> {
   showInteractive?: boolean;
 }
 
-const Controls = memo(
+const Controls = ({ style, showZoom = true, showFitView = true, showInteractive = true, className }: ControlProps) => {
-  ({ style, showZoom = true, showFitView = true, showInteractive = true, className }: ControlProps) => {
   const setInteractive = useStoreActions((actions) => actions.setInteractive);
   const fitView = useStoreActions((actions) => actions.fitView);
   const zoomIn = useStoreActions((actions) => actions.zoomIn);
@@ -57,9 +56,8 @@ const Controls = memo(
       )}
     </div>
   );
-  }
+};
-);
 
 Controls.displayName = 'Controls';
 
-export default Controls;
+export default memo(Controls);

src/additional-components/MiniMap/MiniMapNode.tsx

@@ -10,7 +10,7 @@ interface MiniMapNodeProps {
   style?: CSSProperties;
 }
 
-const MiniMapNode = memo(({ x, y, width, height, style, color, borderRadius }: MiniMapNodeProps) => {
+const MiniMapNode = ({ x, y, width, height, style, color, borderRadius }: MiniMapNodeProps) => {
   const { background, backgroundColor } = style || {};
   const fill = (color || background || backgroundColor) as string;
 
@@ -26,8 +26,8 @@ const MiniMapNode = memo(({ x, y, width, height, style, color, borderRadius }: M
       fill={fill}
     />
   );
-});
+};
 
 MiniMapNode.displayName = 'MiniMapNode';
 
-export default MiniMapNode;
+export default memo(MiniMapNode);

src/additional-components/MiniMap/index.tsx

@@ -19,14 +19,13 @@ interface MiniMapProps extends React.HTMLAttributes<SVGSVGElement> {
 const defaultWidth = 200;
 const defaultHeight = 150;
 
-const MiniMap = memo(
+const MiniMap = ({
-  ({
   style = { backgroundColor: '#f8f8f8' },
   className,
   nodeColor = '#ddd',
   nodeBorderRadius = 5,
   maskColor = 'rgba(10, 10, 10, .25)',
-  }: MiniMapProps) => {
+}: MiniMapProps) => {
   const containerWidth = useStoreState((s) => s.width);
   const containerHeight = useStoreState((s) => s.height);
   const [tX, tY, tScale] = useStoreState((s) => s.transform);
@@ -87,9 +86,8 @@ const MiniMap = memo(
       />
     </svg>
   );
-  }
+};
-);
 
 MiniMap.displayName = 'MiniMap';
 
-export default MiniMap;
+export default memo(MiniMap);

src/components/Edges/wrapEdge.tsx

@@ -23,8 +23,7 @@ interface EdgeWrapperProps {
 }
 
 export default (EdgeComponent: ComponentType<EdgeCompProps>) => {
-  const EdgeWrapper = memo(
+  const EdgeWrapper = ({
-    ({
     id,
     source,
     target,
@@ -83,10 +82,9 @@ export default (EdgeComponent: ComponentType<EdgeCompProps>) => {
         />
       </g>
     );
-    }
+  };
-  );
 
   EdgeWrapper.displayName = 'EdgeWrapper';
 
-  return EdgeWrapper;
+  return memo(EdgeWrapper);
 };

src/components/Handle/BaseHandle.tsx

@@ -130,8 +130,7 @@ function onMouseDown(
   document.addEventListener('mouseup', onMouseUp);
 }
 
-const BaseHandle = memo(
+const BaseHandle = ({
-  ({
   type,
   nodeId,
   onConnect,
@@ -142,7 +141,7 @@ const BaseHandle = memo(
   id = false,
   isValidConnection,
   ...rest
-  }: BaseHandleProps) => {
+}: BaseHandleProps) => {
   const isTarget = type === 'target';
   const handleClasses = cc([
     'react-flow__handle',
@@ -168,9 +167,8 @@ const BaseHandle = memo(
       {...rest}
     />
   );
-  }
+};
-);
 
 BaseHandle.displayName = 'BaseHandle';
 
-export default BaseHandle;
+export default memo(BaseHandle);

src/components/Handle/index.tsx

@@ -7,8 +7,7 @@ import NodeIdContext from '../../contexts/NodeIdContext';
 
 import { HandleProps, ElementId, Position, Connection } from '../../types';
 
-const Handle = memo(
+const Handle = ({
-  ({
   type = 'source',
   position = Position.Top,
   onConnect = () => {},
@@ -17,7 +16,7 @@ const Handle = memo(
   style,
   className,
   id,
-  }: HandleProps) => {
+}: HandleProps) => {
   const nodeId = useContext(NodeIdContext) as ElementId;
   const setPosition = useStoreActions((a) => a.setConnectionPosition);
   const setConnectionNodeId = useStoreActions((a) => a.setConnectionNodeId);
@@ -42,9 +41,8 @@ const Handle = memo(
       style={style}
     />
   );
-  }
+};
-);
 
 Handle.displayName = 'Handle';
 
-export default Handle;
+export default memo(Handle);

src/components/Nodes/DefaultNode.tsx

@@ -3,16 +3,19 @@ import React, { memo } from 'react';
 import Handle from '../../components/Handle';
 import { NodeProps, Position } from '../../types';
 
-const DefaultNode = memo(
+const DefaultNode = ({
-  ({ data, isConnectable, targetPosition = Position.Top, sourcePosition = Position.Bottom }: NodeProps) => (
+  data,
+  isConnectable,
+  targetPosition = Position.Top,
+  sourcePosition = Position.Bottom,
+}: NodeProps) => (
   <>
     <Handle type="target" position={targetPosition} isConnectable={isConnectable} />
     {data.label}
     <Handle type="source" position={sourcePosition} isConnectable={isConnectable} />
   </>
-  )
 );
 
 DefaultNode.displayName = 'DefaultNode';
 
-export default DefaultNode;
+export default memo(DefaultNode);

src/components/Nodes/InputNode.tsx

@@ -3,13 +3,13 @@ import React, { memo } from 'react';
 import Handle from '../../components/Handle';
 import { NodeProps, Position } from '../../types';
 
-const InputNode = memo(({ data, isConnectable, sourcePosition = Position.Bottom }: NodeProps) => (
+const InputNode = ({ data, isConnectable, sourcePosition = Position.Bottom }: NodeProps) => (
   <>
     {data.label}
     <Handle type="source" position={sourcePosition} isConnectable={isConnectable} />
   </>
-));
+);
 
 InputNode.displayName = 'InputNode';
 
-export default InputNode;
+export default memo(InputNode);

src/components/Nodes/OutputNode.tsx

@@ -3,13 +3,13 @@ import React, { memo } from 'react';
 import Handle from '../../components/Handle';
 import { NodeProps, Position } from '../../types';
 
-const OutputNode = memo(({ data, isConnectable, targetPosition = Position.Top }: NodeProps) => (
+const OutputNode = ({ data, isConnectable, targetPosition = Position.Top }: NodeProps) => (
   <>
     <Handle type="target" position={targetPosition} isConnectable={isConnectable} />
     {data.label}
   </>
-));
+);
 
 OutputNode.displayName = 'OutputNode';
 
-export default OutputNode;
+export default memo(OutputNode);

src/components/Nodes/wrapNode.tsx

@@ -160,8 +160,7 @@ const onStop = ({
 };
 
 export default (NodeComponent: ComponentType<NodeComponentProps>) => {
-  const NodeWrapper = memo(
+  const NodeWrapper = ({
-    ({
     id,
     type,
     data,
@@ -342,10 +341,9 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
         </div>
       </DraggableCore>
     );
-    }
+  };
-  );
 
   NodeWrapper.displayName = 'NodeWrapper';
 
-  return NodeWrapper;
+  return memo(NodeWrapper);
 };

src/components/NodesSelection/index.tsx

@@ -3,7 +3,7 @@
  * made a selectio  with on or several nodes
  */
 
-import React, { useState, memo } from 'react';
+import React, { useState } from 'react';
 import ReactDraggable from 'react-draggable';
 
 import { useStoreState, useStoreActions } from '../../store/hooks';
@@ -27,7 +27,7 @@ function getStartPositions(nodes: Node[]): StartPositions {
   }, startPositions);
 }
 
-export default memo(() => {
+export default () => {
   const [offset, setOffset] = useState<XYPosition>({ x: 0, y: 0 });
   const [startPositions, setStartPositions] = useState<StartPositions>({});
   const [tX, tY, tScale] = useStoreState((s) => s.transform);
@@ -110,4 +110,4 @@ export default memo(() => {
       </ReactDraggable>
     </div>
   );
-});
+};

src/container/EdgeRenderer/index.tsx

@@ -193,7 +193,7 @@ function renderEdge(
   );
 }
 
-const EdgeRenderer = memo((props: EdgeRendererProps) => {
+const EdgeRenderer = (props: EdgeRendererProps) => {
   const [tX, tY, tScale] = useStoreState((s) => s.transform);
   const edges = useStoreState((s) => s.edges);
   const nodes = useStoreState((s) => s.nodes);
@@ -234,8 +234,8 @@ const EdgeRenderer = memo((props: EdgeRendererProps) => {
       </g>
     </svg>
   );
-});
+};
 
 EdgeRenderer.displayName = 'EdgeRenderer';
 
-export default EdgeRenderer;
+export default memo(EdgeRenderer);

src/container/GraphView/index.tsx

@@ -62,8 +62,7 @@ export interface GraphViewProps {
   zoomOnDoubleClick: boolean;
 }
 
-const GraphView = memo(
+const GraphView = ({
-  ({
   nodeTypes,
   edgeTypes,
   onMove,
@@ -99,7 +98,7 @@ const GraphView = memo(
   markerEndId,
   zoomOnScroll,
   zoomOnDoubleClick,
-  }: GraphViewProps) => {
+}: GraphViewProps) => {
   const zoomPane = useRef<HTMLDivElement>(null);
   const rendererNode = useRef<HTMLDivElement>(null);
   const width = useStoreState((s) => s.width);
@@ -253,9 +252,8 @@ const GraphView = memo(
       <div className="react-flow__zoompane" onClick={onZoomPaneClick} ref={zoomPane} />
     </div>
   );
-  }
+};
-);
 
 GraphView.displayName = 'GraphView';
 
-export default GraphView;
+export default memo(GraphView);

src/container/NodeRenderer/index.tsx

@@ -68,7 +68,7 @@ function renderNode(
   );
 }
 
-const NodeRenderer = memo(({ onlyRenderVisibleNodes = true, ...props }: NodeRendererProps) => {
+const NodeRenderer = ({ onlyRenderVisibleNodes = true, ...props }: NodeRendererProps) => {
   const nodes = useStoreState((s) => s.nodes);
   const transform = useStoreState((s) => s.transform);
   const selectedElements = useStoreState((s) => s.selectedElements);
@@ -94,8 +94,8 @@ const NodeRenderer = memo(({ onlyRenderVisibleNodes = true, ...props }: NodeRend
       )}
     </div>
   );
-});
+};
 
 NodeRenderer.displayName = 'NodeRenderer';
 
-export default NodeRenderer;
+export default memo(NodeRenderer);