optimize various base components

src/shared/components/paper/paper.tsx

@@ -1,7 +1,7 @@
 import type { PaperProps as MantinePaperProps } from '@mantine/core';
 
 import { Paper as MantinePaper } from '@mantine/core';
-import { ReactNode } from 'react';
+import { memo, ReactNode, useMemo } from 'react';
 
 import styles from './paper.module.css';
 
@@ -9,19 +9,24 @@ export interface PaperProps extends MantinePaperProps {
     children?: ReactNode;
 }
 
-export const Paper = ({ children, classNames, style, ...props }: PaperProps) => {
+const BasePaper = ({ children, classNames, style, ...props }: PaperProps) => {
+    const memoizedClassNames = useMemo(
+        () => ({
+            root: styles.root,
+            ...classNames,
+        }),
+        [classNames],
+    );
+
+    const memoizedStyle = useMemo(() => ({ ...style }), [style]);
+
     return (
-        <MantinePaper
-            classNames={{
-                root: styles.root,
-                ...classNames,
-            }}
-            style={{
-                ...style,
-            }}
-            {...props}
-        >
+        <MantinePaper classNames={memoizedClassNames} style={memoizedStyle} {...props}>
             {children}
         </MantinePaper>
     );
 };
+
+BasePaper.displayName = 'Paper';
+
+export const Paper = memo(BasePaper);