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

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

@@ -62,25 +62,90 @@ type Props = {
 
 type ElementProps = Omit<ComponentProps<'header'>, keyof Props>
 
+const COMMON_GAP = { column: 0.25, row: 0 } as const
+const CHILDREN_GAP = { column: 0.5, row: 0.25 } as const
+
 export const Header: React.FC<PropsWithChildren<Props> & ElementProps> = ({
   enableNew,
-  logo = <SmartHRLogo fill={enableNew ? 'brand' : undefined} className="shr-p-0.75" />,
-  logoHref = '/',
+  logo,
+  logoHref,
   featureName,
-  apps = [],
+  apps,
   tenants,
   currentTenantId,
   onTenantSelect,
   children,
   className,
 }) => {
-  const {
-    wrapper,
-    logoLink,
-    tenantInfo: tenantInfoStyle,
-    tenantNameText,
-    actions,
-  } = header({ enableNew })
+  const styles = useMemo(() => {
+    const {
+      wrapper,
+      logoLink,
+      tenantInfo: tenantInfoStyle,
+      tenantNameText,
+      actions,
+    } = header({ enableNew })
+
+    return {
+      wrapper: wrapper({ className }),
+      logoLink: logoLink(),
+      tenantInfo: tenantInfoStyle(),
+      tenantNameText: tenantNameText(),
+      actions: actions(),
+    }
+  }, [enableNew, className])
+
+  return (
+    <Cluster as="header" justify="space-between" gap={COMMON_GAP} className={styles.wrapper}>
+      <Cluster align="center" gap={COMMON_GAP}>
+        <Logo href={logoHref} enableNew={enableNew} className={styles.logoLink}>
+          {logo}
+        </Logo>
+        {enableNew ? (
+          <MemoizedAppLauncher featureName={featureName} apps={apps} enableNew={enableNew} />
+        ) : (
+          <TenantSwitcher
+            currentTenantId={currentTenantId}
+            tenants={tenants}
+            styles={styles}
+            onTenantSelect={onTenantSelect}
+          />
+        )}
+      </Cluster>
+      <Cluster align="center" justify="flex-end" gap={CHILDREN_GAP} className={styles.actions}>
+        {children}
+      </Cluster>
+    </Cluster>
+  )
+}
+
+const Logo = React.memo<
+  Pick<Props, 'enableNew'> & { children: Props['logo']; href: Props['logoHref']; 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 }) => {
+    const decorators = useMemo(() => {
+      if (!featureName) {
+        return undefined
+      }
+
+      return { triggerLabel: () => featureName }
+    }, [featureName])
+
+    return featureName && <AppLauncher apps={apps} enableNew={enableNew} decorators={decorators} />
+  },
+)
+
+const TenantSwitcher = React.memo<
+  Pick<Props, 'currentTenantId' | 'tenants' | 'onTenantSelect'> & {
+    styles: { tenantInfo: string; tenantNameText: string }
+  }
+>(({ currentTenantId, tenants, styles, onTenantSelect }) => {
   const currentTenantName = useMemo(() => {
     if (tenants && tenants.length >= 1) {
       const current = tenants.find(({ id }) => id === currentTenantId)
@@ -89,53 +154,46 @@ export const Header: React.FC<PropsWithChildren<Props> & ElementProps> = ({
 
     return undefined
   }, [currentTenantId, tenants])
-  const tenantInfo = useMemo(
+
+  return (
+    currentTenantName && (
+      <div className={styles.tenantInfo}>
+        {tenants && tenants.length > 1 ? (
+          <MultiTenantDropdownMenuButton
+            label={currentTenantName}
+            tenants={tenants}
+            onTenantSelect={onTenantSelect}
+          />
+        ) : (
+          <Text color="TEXT_WHITE" className={styles.tenantNameText}>
+            {currentTenantName}
+          </Text>
+        )}
+      </div>
+    )
+  )
+})
+
+const MultiTenantDropdownMenuButton = React.memo<
+  Pick<Required<Props>, 'tenants'> & Pick<Props, 'onTenantSelect'> & { label: ReactNode }
+>(({ label, tenants, onTenantSelect }) => {
+  const onClick = useMemo(
     () =>
-      tenants && tenants.length > 1 ? (
-        <HeaderDropdownMenuButton label={currentTenantName}>
-          {tenants.map(({ id, name }) => (
-            <Button key={id} onClick={() => onTenantSelect && onTenantSelect(id)}>
-              {name}
-            </Button>
-          ))}
-        </HeaderDropdownMenuButton>
-      ) : (
-        <Text color="TEXT_WHITE" className={tenantNameText()}>
-          {currentTenantName}
-        </Text>
-      ),
-    [currentTenantName, onTenantSelect, tenants, tenantNameText],
+      onTenantSelect
+        ? (e: React.MouseEvent<HTMLButtonElement>) => {
+            onTenantSelect(e.currentTarget.value)
+          }
+        : undefined,
+    [onTenantSelect],
   )
 
   return (
-    <Cluster
-      as="header"
-      justify="space-between"
-      gap={{ column: 0.25, row: 0 }}
-      className={wrapper({ className })}
-    >
-      <Cluster align="center" gap={{ column: 0.25, row: 0 }}>
-        <a href={logoHref} className={logoLink()}>
-          {logo}
-        </a>
-        {enableNew
-          ? featureName && (
-              <AppLauncher
-                apps={apps}
-                enableNew={enableNew}
-                decorators={{ triggerLabel: () => featureName }}
-              />
-            )
-          : currentTenantName && <div className={tenantInfoStyle()}>{tenantInfo}</div>}
-      </Cluster>
-      <Cluster
-        align="center"
-        justify="flex-end"
-        gap={{ column: 0.5, row: 0.25 }}
-        className={actions()}
-      >
-        {children}
-      </Cluster>
-    </Cluster>
+    <HeaderDropdownMenuButton label={label}>
+      {tenants.map(({ id, name }) => (
+        <Button key={id} value={id} onClick={onClick}>
+          {name}
+        </Button>
+      ))}
+    </HeaderDropdownMenuButton>
   )
-}
+})

packages/smarthr-ui/src/components/Header/HeaderLink.tsx

@@ -22,5 +22,6 @@ const headerLink = tv({
 
 export const HeaderLink: React.FC<Props> = ({ enableNew, className, ...props }) => {
   const style = headerLink({ enableNew, className })
+
   return <TextLink {...props} target="_blank" suffix={null} className={style} />
 }