optimize various base components

src/shared/components/multi-select/multi-select.tsx

@@ -2,7 +2,7 @@ import {
     MultiSelect as MantineMultiSelect,
     MultiSelectProps as MantineMultiSelectProps,
 } from '@mantine/core';
-import { CSSProperties } from 'react';
+import { CSSProperties, useMemo } from 'react';
 
 import styles from './multi-select.module.css';
 
@@ -11,6 +11,23 @@ export interface MultiSelectProps extends MantineMultiSelectProps {
     width?: CSSProperties['width'];
 }
 
+const defaultClassNames = {
+    dropdown: styles.dropdown,
+    input: styles.input,
+    label: styles.label,
+    option: styles.option,
+    pill: styles.pill,
+    pillsList: styles.pillsList,
+    root: styles.root,
+};
+
+const defaultClearButtonProps = {
+    classNames: {
+        root: styles.clearButton,
+    },
+    variant: 'transparent' as const,
+};
+
 export const MultiSelect = ({
     classNames,
     maxWidth,
@@ -18,25 +35,21 @@ export const MultiSelect = ({
     width,
     ...props
 }: MultiSelectProps) => {
+    const mergedClassNames = useMemo(
+        () => (classNames ? { ...defaultClassNames, ...classNames } : defaultClassNames),
+        [classNames],
+    );
+
+    const style = useMemo(
+        () => (maxWidth || width ? { maxWidth, width } : undefined),
+        [maxWidth, width],
+    );
+
     return (
         <MantineMultiSelect
-            classNames={{
-                dropdown: styles.dropdown,
-                input: styles.input,
-                label: styles.label,
-                option: styles.option,
-                pill: styles.pill,
-                pillsList: styles.pillsList,
-                root: styles.root,
-                ...classNames,
-            }}
-            clearButtonProps={{
-                classNames: {
-                    root: styles.clearButton,
-                },
-                variant: 'transparent',
-            }}
-            style={{ maxWidth, width }}
+            classNames={mergedClassNames}
+            clearButtonProps={defaultClearButtonProps}
+            style={style}
             variant={variant}
             withCheckIcon={false}
             {...props}