refactor(classnames): use faster classcat alternative

src/components/ConnectionLine/index.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState, CSSProperties } from 'react';
-import cx from 'classnames';
+import cc from 'classcat';
 
 import { getBezierPath } from '../Edges/BezierEdge';
 import { getStepPath } from '../Edges/StepEdge';
@@ -46,7 +46,7 @@ export default ({
     return null;
   }
 
-  const connectionLineClasses: string = cx('react-flow__connection', className);
+  const connectionLineClasses: string = cc(['react-flow__connection', className]);
 
   const sourceHandle = handleId
     ? sourceNode.__rf.handleBounds[connectionHandleType].find((d: HandleElement) => d.id === handleId)

src/components/Edges/wrapEdge.tsx

@@ -1,5 +1,5 @@
 import React, { memo, ComponentType, CSSProperties } from 'react';
-import cx from 'classnames';
+import cc from 'classcat';
 
 import { useStoreActions } from '../../store/hooks';
 import { ElementId, Edge, EdgeCompProps } from '../../types';
@@ -39,7 +39,7 @@ export default (EdgeComponent: ComponentType<EdgeCompProps>) => {
       ...rest
     }: EdgeWrapperProps) => {
       const setSelectedElements = useStoreActions((a) => a.setSelectedElements);
-      const edgeClasses = cx('react-flow__edge', `react-flow__edge-${type}`, className, { selected, animated });
+      const edgeClasses = cc(['react-flow__edge', `react-flow__edge-${type}`, className, { selected, animated }]);
       const edgeGroupStyle: CSSProperties = {
         pointerEvents: elementsSelectable ? 'all' : 'none',
       };

src/components/Handle/BaseHandle.tsx

@@ -1,5 +1,5 @@
 import React, { memo, MouseEvent as ReactMouseEvent, CSSProperties } from 'react';
-import cx from 'classnames';
+import cc from 'classcat';
 
 import { HandleType, ElementId, Position, XYPosition, OnConnectFunc, Connection, SetConnectionId } from '../../types';
 
@@ -144,10 +144,16 @@ const BaseHandle = memo(
     ...rest
   }: BaseHandleProps) => {
     const isTarget = type === 'target';
-    const handleClasses = cx('react-flow__handle', `react-flow__handle-${position}`, 'nodrag', className, {
-      source: !isTarget,
-      target: isTarget,
-    });
+    const handleClasses = cc([
+      'react-flow__handle',
+      `react-flow__handle-${position}`,
+      'nodrag',
+      className,
+      {
+        source: !isTarget,
+        target: isTarget,
+      },
+    ]);
 
     const nodeIdWithHandleId = id ? `${nodeId}__${id}` : nodeId;
 

src/components/Handle/index.tsx

@@ -1,5 +1,5 @@
 import React, { memo, useContext } from 'react';
-import classnames from 'classnames';
+import cc from 'classcat';
 
 import { useStoreActions, useStoreState } from '../../store/hooks';
 import BaseHandle from './BaseHandle';
@@ -26,7 +26,7 @@ const Handle = memo(
       onConnectAction(params);
       onConnect(params);
     };
-    const handleClasses = classnames(className, { connectable: isConnectable });
+    const handleClasses = cc([className, { connectable: isConnectable }]);
 
     return (
       <BaseHandle

src/components/Nodes/wrapNode.tsx

@@ -10,7 +10,8 @@ import React, {
   useCallback,
 } from 'react';
 import { DraggableCore } from 'react-draggable';
-import cx from 'classnames';
+import cc from 'classcat';
+
 import { ResizeObserver } from 'resize-observer';
 import { useStoreActions } from '../../store/hooks';
 
@@ -192,10 +193,15 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
       const [offset, setOffset] = useState({ x: 0, y: 0 });
       const [isDragging, setDragging] = useState(false);
       const position = { x: xPos, y: yPos };
-      const nodeClasses = cx('react-flow__node', `react-flow__node-${type}`, className, {
-        selected,
-        selectable: isSelectable,
-      });
+      const nodeClasses = cc([
+        'react-flow__node',
+        `react-flow__node-${type}`,
+        className,
+        {
+          selected,
+          selectable: isSelectable,
+        },
+      ]);
       const node = { id, type, position, data };
       const onMouseEnterHandler = useMemo(() => {
         if (!onMouseEnter || isDragging) {