chore: DropdownMenuGroupのstyle生成ロジックをmemo化

kufu · Jan 22, 2025 · cf0977c · cf0977c
1 parent 4e3a70b
commit cf0977c
Showing 1 changed file with 28 additions and 11 deletions.
diff --git a/packages/smarthr-ui/src/components/Dropdown/DropdownMenuButton/DropdownMenuGroup.tsx b/packages/smarthr-ui/src/components/Dropdown/DropdownMenuButton/DropdownMenuGroup.tsx
@@ -1,4 +1,4 @@
-import React, { ComponentProps, type PropsWithChildren, type ReactNode } from 'react'
+import React, { ComponentProps, type PropsWithChildren, type ReactNode, useMemo } from 'react'
 import { tv } from 'tailwind-variants'
 
 import { Text } from '../../Text'
@@ -36,13 +36,30 @@ export const DropdownMenuGroup: React.FC<Props & ElementProps> = ({
   name,
   children,
   className,
-}) => (
-  <li className={group({ className })}>
-    {name && (
-      <Text as="p" size="S" weight="bold" color="TEXT_GREY" leading="NONE" className={groupName()}>
-        {name}
-      </Text>
-    )}
-    <ul>{renderButtonList(children)}</ul>
-  </li>
-)
+}) => {
+  const styles = useMemo(
+    () => ({
+      group: group({ className }),
+      groupName: groupName(),
+    }),
+    [className],
+  )
+
+  return (
+    <li className={styles.group}>
+      {name && (
+        <Text
+          as="p"
+          size="S"
+          weight="bold"
+          color="TEXT_GREY"
+          leading="NONE"
+          className={styles.groupName}
+        >
+          {name}
+        </Text>
+      )}
+      <ul>{renderButtonList(children)}</ul>
+    </li>
+  )
+}