optimize various base components

src/shared/components/badge/badge.tsx

@@ -3,6 +3,7 @@ import {
     Badge as MantineBadge,
     BadgeProps as MantineBadgeProps,
 } from '@mantine/core';
+import { useMemo } from 'react';
 
 import styles from './badge.module.css';
 
@@ -12,17 +13,20 @@ export interface BadgeProps
     extends ElementProps<'div', keyof MantineBadgeProps>,
         MantineBadgeProps {}
 
-const _Badge = ({ children, classNames, variant = 'default', ...props }: BadgeProps) => {
+const BaseBadge = ({ children, classNames, variant = 'default', ...props }: BadgeProps) => {
+    const memoizedClassNames = useMemo(
+        () => ({
+            root: styles.root,
+            ...classNames,
+        }),
+        [classNames],
+    );
+
     return (
-        <MantineBadge
-            classNames={{ root: styles.root, ...classNames }}
-            radius="md"
-            variant={variant}
-            {...props}
-        >
+        <MantineBadge classNames={memoizedClassNames} radius="md" variant={variant} {...props}>
             {children}
         </MantineBadge>
     );
 };
 
-export const Badge = createPolymorphicComponent<'button', BadgeProps>(_Badge);
+export const Badge = createPolymorphicComponent<'button', BadgeProps>(BaseBadge);