optimize various base components

src/shared/components/divider/divider.tsx

@@ -1,19 +1,33 @@
 import { Divider as MantineDivider, DividerProps as MantineDividerProps } from '@mantine/core';
-import { forwardRef } from 'react';
+import { forwardRef, memo, useMemo } from 'react';
 
 import styles from './divider.module.css';
 
 export interface DividerProps extends MantineDividerProps {}
 
-export const Divider = forwardRef<HTMLDivElement, DividerProps>(
+const _Divider = forwardRef<HTMLDivElement, DividerProps>(
     ({ classNames, style, ...props }, ref) => {
+        const memoizedClassNames = useMemo(
+            () => ({
+                root: styles.root,
+                ...classNames,
+            }),
+            [classNames],
+        );
+
+        const memoizedStyle = useMemo(() => ({ ...style }), [style]);
+
         return (
             <MantineDivider
-                classNames={{ root: styles.root, ...classNames }}
+                classNames={memoizedClassNames}
                 ref={ref}
-                style={{ ...style }}
+                style={memoizedStyle}
                 {...props}
             />
         );
     },
 );
+
+_Divider.displayName = 'Divider';
+
+export const Divider = memo(_Divider);