optimize various base components

src/shared/components/stack/stack.tsx

@@ -1,17 +1,26 @@
 import { Stack as MantineStack, StackProps as MantineStackProps } from '@mantine/core';
-import { forwardRef } from 'react';
+import { forwardRef, memo, useMemo } from 'react';
 
 export interface StackProps extends MantineStackProps {}
 
-export const Stack = forwardRef<HTMLDivElement, StackProps>(({ children, ...props }, ref) => {
-    return (
-        <MantineStack
-            classNames={{ ...props.classNames }}
-            ref={ref}
-            style={{ ...props.style }}
-            {...props}
-        >
-            {children}
-        </MantineStack>
-    );
-});
+const _Stack = forwardRef<HTMLDivElement, StackProps>(
+    ({ children, classNames, style, ...props }, ref) => {
+        const memoizedClassNames = useMemo(() => ({ ...classNames }), [classNames]);
+        const memoizedStyle = useMemo(() => ({ ...style }), [style]);
+
+        return (
+            <MantineStack
+                classNames={memoizedClassNames}
+                ref={ref}
+                style={memoizedStyle}
+                {...props}
+            >
+                {children}
+            </MantineStack>
+        );
+    },
+);
+
+_Stack.displayName = 'Stack';
+
+export const Stack = memo(_Stack);