chore: InformationPanelのHeadingをmemo化する

kufu · Jan 16, 2025 · 628038c · 628038c
1 parent 2e5e2b6
commit 628038c
Showing 1 changed file with 18 additions and 6 deletions.
diff --git a/packages/smarthr-ui/src/components/InformationPanel/InformationPanel.tsx b/packages/smarthr-ui/src/components/InformationPanel/InformationPanel.tsx
@@ -169,12 +169,9 @@ export const InformationPanel: FC<Props> = ({
   return (
     <Base {...props} overflow="hidden" as="section" className={currentStyles.wrapper}>
       <Cluster align="center" justify="space-between" className={currentStyles.header}>
-        {/* eslint-disable-next-line smarthr/a11y-heading-in-sectioning-content */}
-        <Heading type="blockTitle" tag={titleTag} id={titleId} className={currentStyles.heading}>
-          <ResponseMessage type={type} iconGap={0.5}>
-            {title}
-          </ResponseMessage>
-        </Heading>
+        <MemoizedHeading tag={titleTag} id={titleId} className={currentStyles.heading} type={type}>
+          {title}
+        </MemoizedHeading>
         {togglable && (
           <TogglableButton
             active={active}
@@ -192,6 +189,21 @@ export const InformationPanel: FC<Props> = ({
   )
 }
 
+const MemoizedHeading = React.memo<
+  Pick<Props, 'type'> & {
+    tag: Props['titleTag']
+    id: string
+    className: string
+    children: Props['title']
+  }
+>(({ type, children, ...rect }) => (
+  <Heading {...rect} type="blockTitle">
+    <ResponseMessage type={type} iconGap={0.5}>
+      {children}
+    </ResponseMessage>
+  </Heading>
+))
+
 const TogglableButton: React.FC<
   Pick<Props, 'active' | 'onClickTrigger'> & {
     setActive: (flg: boolean) => void