refactor(components): show displayName in react profiler correctly

src/components/Handle/BaseHandle.tsx

@@ -130,47 +130,45 @@ function onMouseDown(
   document.addEventListener('mouseup', onMouseUp);
 }
 
-const BaseHandle = memo(
-  ({
-    type,
-    nodeId,
-    onConnect,
-    position,
-    setConnectionNodeId,
-    setPosition,
+const BaseHandle = ({
+  type,
+  nodeId,
+  onConnect,
+  position,
+  setConnectionNodeId,
+  setPosition,
+  className,
+  id = false,
+  isValidConnection,
+  ...rest
+}: BaseHandleProps) => {
+  const isTarget = type === 'target';
+  const handleClasses = cc([
+    'react-flow__handle',
+    `react-flow__handle-${position}`,
+    'nodrag',
     className,
-    id = false,
-    isValidConnection,
-    ...rest
-  }: BaseHandleProps) => {
-    const isTarget = type === 'target';
-    const handleClasses = cc([
-      'react-flow__handle',
-      `react-flow__handle-${position}`,
-      'nodrag',
-      className,
-      {
-        source: !isTarget,
-        target: isTarget,
-      },
-    ]);
+    {
+      source: !isTarget,
+      target: isTarget,
+    },
+  ]);
 
-    const nodeIdWithHandleId = id ? `${nodeId}__${id}` : nodeId;
+  const nodeIdWithHandleId = id ? `${nodeId}__${id}` : nodeId;
 
-    return (
-      <div
-        data-nodeid={nodeIdWithHandleId}
-        data-handlepos={position}
-        className={handleClasses}
-        onMouseDown={(evt) =>
-          onMouseDown(evt, nodeIdWithHandleId, setConnectionNodeId, setPosition, onConnect, isTarget, isValidConnection)
-        }
-        {...rest}
-      />
-    );
-  }
-);
+  return (
+    <div
+      data-nodeid={nodeIdWithHandleId}
+      data-handlepos={position}
+      className={handleClasses}
+      onMouseDown={(evt) =>
+        onMouseDown(evt, nodeIdWithHandleId, setConnectionNodeId, setPosition, onConnect, isTarget, isValidConnection)
+      }
+      {...rest}
+    />
+  );
+};
 
 BaseHandle.displayName = 'BaseHandle';
 
-export default BaseHandle;
+export default memo(BaseHandle);

src/components/Handle/index.tsx

@@ -7,44 +7,42 @@ import NodeIdContext from '../../contexts/NodeIdContext';
 
 import { HandleProps, ElementId, Position, Connection } from '../../types';
 
-const Handle = memo(
-  ({
-    type = 'source',
-    position = Position.Top,
-    onConnect = () => {},
-    isValidConnection = () => true,
-    isConnectable = true,
-    style,
-    className,
-    id,
-  }: HandleProps) => {
-    const nodeId = useContext(NodeIdContext) as ElementId;
-    const setPosition = useStoreActions((a) => a.setConnectionPosition);
-    const setConnectionNodeId = useStoreActions((a) => a.setConnectionNodeId);
-    const onConnectAction = useStoreState((s) => s.onConnect);
-    const onConnectExtended = (params: Connection) => {
-      onConnectAction(params);
-      onConnect(params);
-    };
-    const handleClasses = cc([className, { connectable: isConnectable }]);
+const Handle = ({
+  type = 'source',
+  position = Position.Top,
+  onConnect = () => {},
+  isValidConnection = () => true,
+  isConnectable = true,
+  style,
+  className,
+  id,
+}: HandleProps) => {
+  const nodeId = useContext(NodeIdContext) as ElementId;
+  const setPosition = useStoreActions((a) => a.setConnectionPosition);
+  const setConnectionNodeId = useStoreActions((a) => a.setConnectionNodeId);
+  const onConnectAction = useStoreState((s) => s.onConnect);
+  const onConnectExtended = (params: Connection) => {
+    onConnectAction(params);
+    onConnect(params);
+  };
+  const handleClasses = cc([className, { connectable: isConnectable }]);
 
-    return (
-      <BaseHandle
-        className={handleClasses}
-        id={id}
-        nodeId={nodeId}
-        setPosition={setPosition}
-        setConnectionNodeId={setConnectionNodeId}
-        onConnect={onConnectExtended}
-        type={type}
-        position={position}
-        isValidConnection={isValidConnection}
-        style={style}
-      />
-    );
-  }
-);
+  return (
+    <BaseHandle
+      className={handleClasses}
+      id={id}
+      nodeId={nodeId}
+      setPosition={setPosition}
+      setConnectionNodeId={setConnectionNodeId}
+      onConnect={onConnectExtended}
+      type={type}
+      position={position}
+      isValidConnection={isValidConnection}
+      style={style}
+    />
+  );
+};
 
 Handle.displayName = 'Handle';
 
-export default Handle;
+export default memo(Handle);