optimize various base components

src/shared/components/flex/flex.tsx

@@ -1,17 +1,21 @@
 import { Flex as MantineFlex, FlexProps as MantineFlexProps } from '@mantine/core';
-import { forwardRef } from 'react';
+import { forwardRef, memo, useMemo } from 'react';
 
 export interface FlexProps extends MantineFlexProps {}
 
-export const Flex = forwardRef<HTMLDivElement, FlexProps>(({ children, ...props }, ref) => {
-    return (
-        <MantineFlex
-            classNames={{ ...props.classNames }}
-            ref={ref}
-            style={{ ...props.style }}
-            {...props}
-        >
-            {children}
-        </MantineFlex>
-    );
-});
+const _Flex = forwardRef<HTMLDivElement, FlexProps>(
+    ({ children, classNames, style, ...props }, ref) => {
+        const memoizedClassNames = useMemo(() => ({ ...classNames }), [classNames]);
+        const memoizedStyle = useMemo(() => ({ ...style }), [style]);
+
+        return (
+            <MantineFlex classNames={memoizedClassNames} ref={ref} style={memoizedStyle} {...props}>
+                {children}
+            </MantineFlex>
+        );
+    },
+);
+
+_Flex.displayName = 'Flex';
+
+export const Flex = memo(_Flex);