chore: Baseの内部処理を最適化する

packages/smarthr-ui/src/components/Badge/Badge.tsx

@@ -92,42 +92,62 @@ const badge = tv({
   ],
 })
 
-export const Badge: React.FC<BadgeProps> = ({
+export const Badge = React.memo<BadgeProps>(({ count, showZero, ...rest }) => {
+  // ドット表示の場合、数値表示は無いため、早期returnする
+  if (rest.dot) {
+    return <ActualBadge {...rest} />
+  }
+
+  const actualCount = count && count > 0 ? count : showZero ? 0 : undefined
+
+  // 0値を表示するでもない場合は何も表示しない
+  if (actualCount === undefined && !rest.children) {
+    return null
+  }
+
+  return <ActualBadge {...rest} count={actualCount} />
+})
+
+const ActualBadge: React.FC<Omit<BadgeProps, 'showZero'>> = ({
   count,
-  overflowCount = 99,
-  showZero = false,
-  type = 'blue',
-  dot = false,
+  overflowCount,
+  type,
+  dot,
   children,
   className,
-  ...props
+  ...rest
 }) => {
-  const actualCount = count && count > 0 ? count : showZero ? 0 : undefined
+  // HINT: boolean化することでmemoが有効になる可能性を高くする
+  const withChildren = !!children
+  const styles = useMemo(() => {
+    const { wrapper, pill, dotElement } = badge({ color: type || 'blue', withChildren })
 
-  const { wrapperStyle, pillStyle, dotStyle } = useMemo(() => {
-    const { wrapper, pill, dotElement } = badge({ color: type, withChildren: !!children })
     return {
-      wrapperStyle: wrapper({ className }),
-      pillStyle: pill(),
-      dotStyle: dotElement(),
+      wrapper: wrapper({ className }),
+      pill: pill(),
+      dot: dotElement(),
     }
-  }, [children, className, type])
-
-  // ドット表示でもなく、0値を表示するでもない場合は何も表示しない
-  if (!dot && !children && actualCount === undefined) return null
+  }, [withChildren, type, className])
 
   return (
-    <span {...props} className={wrapperStyle}>
+    <span {...rest} className={styles.wrapper}>
       {children}
       {dot ? (
-        <span className={dotStyle} />
+        <Dot className={styles.dot} />
       ) : (
-        actualCount !== undefined && (
-          <Text size="XS" className={pillStyle}>
-            {actualCount > overflowCount ? `${overflowCount}+` : actualCount}
-          </Text>
-        )
+        <CountText count={count} overflowCount={overflowCount} className={styles.pill} />
       )}
     </span>
   )
 }
+
+const Dot = React.memo<{ className: string }>(({ className }) => <span className={className} />)
+
+const CountText = React.memo<Pick<BadgeProps, 'count' | 'overflowCount'> & { className: string }>(
+  ({ count, overflowCount = 99, className }) =>
+    count !== undefined && (
+      <Text size="XS" className={className}>
+        {count > overflowCount ? `${overflowCount}+` : count}
+      </Text>
+    ),
+)

packages/smarthr-ui/src/components/Balloon/Balloon.tsx

@@ -1,4 +1,4 @@
-import React, { ComponentPropsWithoutRef, FC, PropsWithChildren, useMemo } from 'react'
+import React, { ComponentPropsWithoutRef, PropsWithChildren, useMemo } from 'react'
 import { VariantProps, tv } from 'tailwind-variants'
 
 // HINT: trianble部分はRetinaディスプレイなどで途切れてしまう場合があるので
@@ -119,17 +119,13 @@ type Props = PropsWithChildren<
 
 type ElementProps = Omit<ComponentPropsWithoutRef<'div'>, keyof Props>
 
-export const Balloon: FC<Props & ElementProps> = ({
-  horizontal,
-  vertical,
-  className,
-  as: Component = 'div',
-  ...props
-}) => {
-  const styles = useMemo(
-    () => balloon({ horizontal, vertical, className }),
-    [className, horizontal, vertical],
-  )
+export const Balloon = React.memo<Props & ElementProps>(
+  ({ horizontal, vertical, className, as: Component = 'div', ...props }) => {
+    const styles = useMemo(
+      () => balloon({ horizontal, vertical, className }),
+      [horizontal, vertical, className],
+    )
 
-  return <Component {...props} className={styles} />
-}
+    return <Component {...props} className={styles} />
+  },
+)

packages/smarthr-ui/src/components/Base/Base.tsx

@@ -114,22 +114,20 @@ export const Base = forwardRef<HTMLDivElement, Props & ElementProps>(
     ref,
   ) => {
     const styles = useMemo(() => {
-      const paddingBlock = padding instanceof Object ? padding.block : padding
-      const paddingInline = padding instanceof Object ? padding.inline : padding
-
-      const overflowBlock = overflow instanceof Object ? overflow.y : overflow
-      const overflowInline = overflow instanceof Object ? overflow.x : overflow
+      const actualPadding =
+        padding instanceof Object ? padding : { block: padding, inline: padding }
+      const actualOverflow = overflow instanceof Object ? overflow : { x: overflow, y: overflow }
 
       return base({
-        paddingBlock,
-        paddingInline,
+        paddingBlock: actualPadding.block,
+        paddingInline: actualPadding.inline,
         radius,
-        overflowBlock,
-        overflowInline,
+        overflowBlock: actualOverflow.y,
+        overflowInline: actualOverflow.x,
         layer,
         className,
       })
-    }, [className, layer, overflow, padding, radius])
+    }, [layer, overflow, padding, radius, className])
 
     const Wrapper = useSectionWrapper(Component)
 

packages/smarthr-ui/src/components/Base/BaseColumn/BaseColumn.tsx

@@ -38,5 +38,6 @@ export const BaseColumn: React.FC<BaseProps & Props & ElementProps> = ({
   ...props
 }) => {
   const styles = useMemo(() => baseColumn({ bgColor, className }), [bgColor, className])
+
   return <Base {...props} padding={padding} layer={0} className={styles} />
 }

packages/smarthr-ui/src/components/Input/CurrencyInput/CurrencyInput.tsx

@@ -13,7 +13,6 @@ import React, {
 import { Input } from '../Input'
 
 import { formatCurrency } from './currencyInputHelper'
-import { useClassNames } from './useClassNames'
 
 type Props = Omit<React.ComponentProps<typeof Input>, 'type' | 'value' | 'defaultValue'> & {
   /** 通貨の値 */
@@ -96,16 +95,14 @@ export const CurrencyInput = forwardRef<HTMLInputElement, Props>(
       [onBlur],
     )
 
-    const classNames = useClassNames(className)
-
     return (
       <Input
         {...props}
         type="text"
         onFocus={handleFocus}
         onBlur={handleBlur}
         ref={innerRef}
-        className={classNames.wrapper}
+        className={`smarthr-ui-CurrencyInput${className ? ` ${className}` : ''}`}
       />
     )
   },