optimize various base components

src/shared/components/option/option.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { memo, ReactNode, useMemo } from 'react';
 
 import styles from './option.module.css';
 
@@ -10,13 +10,22 @@ interface OptionProps extends GroupProps {
     children: ReactNode;
 }
 
-export const Option = ({ children, ...props }: OptionProps) => {
+const defaultClassNames = { root: styles.root };
+
+export const Option = memo(({ children, classNames, ...props }: OptionProps) => {
+    const mergedClassNames = useMemo(
+        () => (classNames ? { ...defaultClassNames, ...classNames } : defaultClassNames),
+        [classNames],
+    );
+
     return (
-        <Group classNames={{ root: styles.root }} grow {...props}>
+        <Group classNames={mergedClassNames} grow {...props}>
             {children}
         </Group>
     );
-};
+});
+
+Option.displayName = 'Option';
 
 interface LabelProps {
     children: ReactNode;
@@ -34,5 +43,5 @@ const Control = ({ children }: ControlProps) => {
     return <Flex justify="flex-end">{children}</Flex>;
 };
 
-Option.Label = Label;
-Option.Control = Control;
+(Option as typeof Option & { Label: typeof Label }).Label = Label;
+(Option as typeof Option & { Control: typeof Control }).Control = Control;