chore: Headerのlogoレンダリングを最適化

kufu · Jan 16, 2025 · b7624b6 · b7624b6
1 parent fd37877
commit b7624b6
Showing 1 changed file with 11 additions and 8 deletions.
diff --git a/packages/smarthr-ui/src/components/Header/Header.tsx b/packages/smarthr-ui/src/components/Header/Header.tsx
@@ -95,17 +95,12 @@ export const Header: React.FC<PropsWithChildren<Props> & ElementProps> = ({
     }
   }, [enableNew, className])
 
-  const actualLogo = useMemo(
-    () => logo || <SmartHRLogo fill={enableNew ? 'brand' : undefined} className="shr-p-0.75" />,
-    [logo, enableNew],
-  )
-
   return (
     <Cluster as="header" justify="space-between" gap={COMMON_GAP} className={styles.wrapper}>
       <Cluster align="center" gap={COMMON_GAP}>
-        <a href={logoHref} className={styles.logoLink}>
-          {actualLogo}
-        </a>
+        <Logo href={logoHref} enableNew={enableNew} className={styles.logoLink}>
+          {logo}
+        </Logo>
         {enableNew ? (
           <MemoizedAppLauncher featureName={featureName} apps={apps} enableNew={enableNew} />
         ) : (
@@ -124,6 +119,14 @@ export const Header: React.FC<PropsWithChildren<Props> & ElementProps> = ({
   )
 }
 
+const Logo = React.memo<
+  Pick<Props, 'enableNew'> & { children: Props['logo']; href: Props['href']; className: string }
+>(({ children, href, enableNew, className }) => (
+  <a href={href} className={className}>
+    {children || <SmartHRLogo fill={enableNew ? 'brand' : undefined} className="shr-p-0.75" />}
+  </a>
+))
+
 const MemoizedAppLauncher = React.memo<Pick<Props, 'featureName' | 'apps' | 'enableNew'>>(
   ({ featureName, apps, enableNew, featureName }) => {
     const decorators = useMemo(() => {