optimize various base components

src/shared/components/text/text.tsx

@@ -1,6 +1,6 @@
 import { Text as MantineText, TextProps as MantineTextProps } from '@mantine/core';
 import clsx from 'clsx';
-import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { ComponentPropsWithoutRef, ReactNode, useMemo } from 'react';
 
 import styles from './text.module.css';
 
@@ -21,7 +21,7 @@ type Font = 'Epilogue' | 'Gotham' | 'Inter' | 'Poppins';
 
 type MantineTextDivProps = ComponentPropsWithoutRef<'div'> & MantineTextProps;
 
-export const _Text = ({
+export const BaseText = ({
     children,
     font,
     isLink,
@@ -31,28 +31,31 @@ export const _Text = ({
     weight,
     ...rest
 }: TextProps) => {
+    const classNames = useMemo(
+        () => ({
+            root: clsx(styles.root, {
+                [styles.link]: isLink,
+                [styles.muted]: isMuted,
+                [styles.noSelect]: isNoSelect,
+                [styles.overflowHidden]: overflow === 'hidden',
+            }),
+        }),
+        [isLink, isMuted, isNoSelect, overflow],
+    );
+
+    const style = useMemo(
+        () =>
+            ({
+                '--font-family': font,
+            }) as React.CSSProperties,
+        [font],
+    );
+
     return (
-        <MantineText
-            classNames={{
-                root: clsx(styles.root, {
-                    [styles.link]: isLink,
-                    [styles.muted]: isMuted,
-                    [styles.noSelect]: isNoSelect,
-                    [styles.overflowHidden]: overflow === 'hidden',
-                }),
-            }}
-            component="div"
-            fw={weight}
-            style={
-                {
-                    '--font-family': font,
-                } as React.CSSProperties
-            }
-            {...rest}
-        >
+        <MantineText classNames={classNames} component="div" fw={weight} style={style} {...rest}>
             {children}
         </MantineText>
     );
 };
 
-export const Text = createPolymorphicComponent<'div', TextProps>(_Text);
+export const Text = createPolymorphicComponent<'div', TextProps>(BaseText);