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

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

@@ -1,11 +1,9 @@
 'use client'
 
 import React, {
-  ChangeEventHandler,
   ComponentPropsWithRef,
   PropsWithChildren,
   forwardRef,
-  useCallback,
   useEffect,
   useId,
   useImperativeHandle,
@@ -59,48 +57,29 @@ const checkbox = tv({
       'shr-relative shr-box-border shr-inline-block shr-h-[theme(fontSize.base)] shr-w-[theme(fontSize.base)] shr-shrink-0 shr-translate-y-[0.125em] shr-leading-none',
     label: [
       'smarthr-ui-CheckBox-label shr-ms-0.5 shr-cursor-pointer shr-text-base shr-leading-tight',
+      '[[data-disabled=true]>&]:shr-pointer-events-none [[data-disabled=true]>&]:shr-cursor-not-allowed [[data-disabled=true]>&]:shr-text-disabled',
     ],
   },
-  variants: {
-    disabled: {
-      true: {
-        label: 'shr-pointer-events-none shr-cursor-not-allowed shr-text-disabled',
-      },
-    },
-  },
 })
 
 export const CheckBox = forwardRef<HTMLInputElement, Props>(
-  ({ checked, mixed = false, error, onChange, className, children, ...props }, ref) => {
-    const {
-      wrapperStyle,
-      innerWrapperStyle,
-      boxStyle,
-      inputStyle,
-      iconWrapStyle,
-      iconStyle,
-      labelStyle,
-    } = useMemo(() => {
+  ({ checked, mixed, error, className, children, disabled, ...props }, ref) => {
+    const styles = useMemo(() => {
       const { wrapper, innerWrapper, box, input, iconWrap, icon, label } = checkbox()
+
       return {
-        wrapperStyle: wrapper({ className }),
-        innerWrapperStyle: innerWrapper(),
-        boxStyle: box(),
-        inputStyle: input(),
-        iconWrapStyle: iconWrap(),
-        iconStyle: icon(),
-        labelStyle: label({ disabled: props.disabled }),
+        wrapper: wrapper({ className }),
+        innerWrapper: innerWrapper(),
+        box: box(),
+        input: input(),
+        iconWrap: iconWrap(),
+        icon: icon(),
+        label: label(),
       }
-    }, [className, props.disabled])
-
-    const handleChange = useCallback<ChangeEventHandler<HTMLInputElement>>(
-      (e) => {
-        if (onChange) onChange(e)
-      },
-      [onChange],
-    )
+    }, [className])
 
     const inputRef = useRef<HTMLInputElement>(null)
+
     useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(
       ref,
       () => inputRef.current,
@@ -116,31 +95,48 @@ export const CheckBox = forwardRef<HTMLInputElement, Props>(
     const checkBoxId = props.id || defaultId
 
     return (
-      <span className={wrapperStyle}>
-        <span className={innerWrapperStyle}>
+      <span data-disabled={disabled?.toString()} className={styles.wrapper}>
+        <span className={styles.innerWrapper}>
           <input
             {...props}
-            data-smarthr-ui-input="true"
+            ref={inputRef}
             type="checkbox"
             id={checkBoxId}
             checked={checked}
-            onChange={handleChange}
-            className={inputStyle}
-            ref={inputRef}
+            disabled={disabled}
             aria-invalid={error || undefined}
+            className={styles.input}
+            data-smarthr-ui-input="true"
           />
-          <span className={boxStyle} aria-hidden="true" />
-          <span className={iconWrapStyle}>
-            {mixed ? <FaMinusIcon className={iconStyle} /> : <FaCheckIcon className={iconStyle} />}
-          </span>
+          <AriaHiddenBox className={styles.box} />
+          <CheckIconArea mixed={mixed} className={styles.iconWrap} iconStyle={styles.icon} />
         </span>
 
-        {children && (
-          <label className={labelStyle} htmlFor={checkBoxId}>
-            {children}
-          </label>
-        )}
+        <LabeledChildren htmlFor={checkBoxId} className={styles.label}>
+          {children}
+        </LabeledChildren>
       </span>
     )
   },
 )
+
+const AriaHiddenBox = React.memo<{ className: string }>(({ className }) => (
+  <span className={className} aria-hidden="true" />
+))
+
+const CheckIconArea = React.memo<Pick<Props, 'mixed'> & { className: string; iconStyle: string }>(
+  ({ mixed, className, iconStyle }) => (
+    <span className={className}>
+      {mixed ? <FaMinusIcon className={iconStyle} /> : <FaCheckIcon className={iconStyle} />}
+    </span>
+  ),
+)
+
+const LabeledChildren = React.memo<PropsWithChildren<{ className: string; htmlFor: string }>>(
+  ({ children, htmlFor, className }) =>
+    children && (
+      <label htmlFor={htmlFor} className={className}>
+        {children}
+      </label>
+    ),
+)

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

@@ -24,5 +24,6 @@ const chip = tv({
 
 export const Chip: FC<Props> = ({ size, disabled, className, ...props }) => {
   const styles = useMemo(() => chip({ size, disabled, className }), [size, disabled, className])
+
   return <span {...props} className={styles} />
 }