chore: テキスト系のシンプルなコンポーネントをmemo化する

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

@@ -17,7 +17,7 @@ import { FaCircleExclamationIcon } from '../Icon'
 import { Cluster, Stack } from '../Layout'
 import { StatusLabel } from '../StatusLabel'
 import { Text, TextProps } from '../Text'
-import { VisuallyHiddenText, visuallyHiddenText } from '../VisuallyHiddenText'
+import { VisuallyHiddenText, visuallyHiddenTextClassNameGenerator } from '../VisuallyHiddenText'
 
 import type { Gap } from '../../types'
 
@@ -191,7 +191,9 @@ export const ActualFormControl: React.FC<Props & ElementProps> = ({
 
       return {
         wrapperStyle: wrapper({ className }),
-        labelStyle: label({ className: dangerouslyTitleHidden ? visuallyHiddenText() : '' }),
+        labelStyle: label({
+          className: dangerouslyTitleHidden ? visuallyHiddenTextClassNameGenerator() : '',
+        }),
         errorListStyle: errorList(),
         errorIconStyle: errorIcon(),
         underTitleStackStyle: underTitleStack(),

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

@@ -1,6 +1,12 @@
 'use client'
 
-import React, { ComponentProps, FC, PropsWithChildren, useContext, useMemo } from 'react'
+import React, {
+  type ComponentProps,
+  type PropsWithChildren,
+  memo,
+  useContext,
+  useMemo,
+} from 'react'
 import { tv } from 'tailwind-variants'
 
 import { LevelContext } from '../SectioningContent'
@@ -42,7 +48,7 @@ const generateTagProps = (level: number, tag?: HeadingTagTypes) => {
   }
 }
 
-const heading = tv({
+const classNameGenerator = tv({
   base: 'smarthr-ui-Heading',
   variants: {
     visuallyHidden: {
@@ -54,27 +60,25 @@ const heading = tv({
   },
 })
 
-export const Heading: FC<Props & ElementProps> = ({
-  tag,
-  type = 'sectionTitle',
-  className,
-  visuallyHidden,
-  ...props
-}) => {
-  const level = useContext(LevelContext)
-  const tagProps = useMemo(() => generateTagProps(level, tag), [level, tag])
-  const styles = useMemo(() => heading({ visuallyHidden, className }), [className, visuallyHidden])
-  const actualProps = {
-    ...props,
-    ...STYLE_TYPE_MAP[type],
-    ...tagProps,
-    className: styles,
-  }
+export const Heading = memo<Props & ElementProps>(
+  ({ tag, type = 'sectionTitle', className, visuallyHidden, ...props }) => {
+    const level = useContext(LevelContext)
+    const tagProps = useMemo(() => generateTagProps(level, tag), [level, tag])
+    const actualClassName = useMemo(
+      () => classNameGenerator({ visuallyHidden, className }),
+      [className, visuallyHidden],
+    )
+    const Component = visuallyHidden ? VisuallyHiddenText : Text
 
-  return visuallyHidden ? <VisuallyHiddenText {...actualProps} /> : <Text {...actualProps} />
-}
+    return (
+      <Component {...props} {...STYLE_TYPE_MAP[type]} {...tagProps} className={actualClassName} />
+    )
+  },
+)
 
-export const PageHeading: FC<Omit<Props & ElementProps, 'visuallyHidden' | 'tag'>> = ({
-  type = 'screenTitle',
-  ...props
-}) => <Heading {...props} type={type} tag="h1" /> // eslint-disable-line smarthr/a11y-heading-in-sectioning-content
+export const PageHeading = memo<Omit<Props & ElementProps, 'visuallyHidden' | 'tag'>>(
+  ({ type = 'screenTitle', ...props }) => (
+    // eslint-disable-next-line smarthr/a11y-heading-in-sectioning-content
+    <Heading {...props} type={type} tag="h1" />
+  ),
+)

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

@@ -1,4 +1,4 @@
-import React, { ComponentProps, PropsWithChildren, useMemo } from 'react'
+import React, { type ComponentProps, type PropsWithChildren, memo, useMemo } from 'react'
 import { VariantProps, tv } from 'tailwind-variants'
 
 type StyleType =
@@ -8,7 +8,7 @@ type StyleType =
   | 'subBlockTitle'
   | 'subSubBlockTitle'
 
-export const STYLE_TYPE_MAP: { [key in StyleType]: VariantProps<typeof text> } = {
+export const STYLE_TYPE_MAP: { [key in StyleType]: VariantProps<typeof classNameGenerator> } = {
   screenTitle: {
     size: 'XL',
     leading: 'TIGHT',
@@ -44,7 +44,7 @@ const UNDEFINED_STYLE_VALUES = {
   color: undefined,
 }
 
-const text = tv({
+const classNameGenerator = tv({
   variants: {
     size: {
       XXS: 'shr-text-2xs',
@@ -87,7 +87,9 @@ const text = tv({
 })
 
 // VariantProps を使うとコメントが書けない〜🥹
-export type TextProps<T extends React.ElementType = 'span'> = VariantProps<typeof text> & {
+export type TextProps<T extends React.ElementType = 'span'> = VariantProps<
+  typeof classNameGenerator
+> & {
   /** テキストコンポーネントの HTML タグ名。初期値は span */
   as?: T
   /** 強調するかどうかの真偽値。指定すると em 要素になる */
@@ -96,7 +98,7 @@ export type TextProps<T extends React.ElementType = 'span'> = VariantProps<typeo
   styleType?: StyleType
 }
 
-export const Text = <T extends React.ElementType = 'span'>({
+const ActualText = <T extends React.ElementType = 'span'>({
   emphasis,
   styleType,
   weight = emphasis ? 'bold' : undefined,
@@ -109,12 +111,12 @@ export const Text = <T extends React.ElementType = 'span'>({
   className,
   ...props
 }: PropsWithChildren<TextProps<T> & ComponentProps<T>>) => {
-  const styles = useMemo(() => {
+  const actualClassName = useMemo(() => {
     const styleTypeValues = styleType
       ? STYLE_TYPE_MAP[styleType as StyleType]
       : UNDEFINED_STYLE_VALUES
 
-    return text({
+    return classNameGenerator({
       size: size || styleTypeValues.size,
       weight: weight || styleTypeValues.weight,
       color: color || styleTypeValues.color,
@@ -125,5 +127,7 @@ export const Text = <T extends React.ElementType = 'span'>({
     })
   }, [size, weight, italic, color, leading, whiteSpace, className, styleType])
 
-  return <Component {...props} className={styles} />
+  return <Component {...props} className={actualClassName} />
 }
+
+export const Text = memo(ActualText) as typeof ActualText

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

@@ -1,11 +1,12 @@
 import React, {
-  ComponentPropsWithoutRef,
-  ElementType,
-  FC,
-  PropsWithoutRef,
-  ReactNode,
-  Ref,
+  type ComponentPropsWithoutRef,
+  type ElementType,
+  type FC,
+  type PropsWithoutRef,
+  type ReactNode,
+  type Ref,
   forwardRef,
+  memo,
   useMemo,
 } from 'react'
 import { tv } from 'tailwind-variants'
@@ -45,7 +46,7 @@ const { anchor, prefixWrapper, suffixWrapper } = textLink()
 const prefixWrapperClassName = prefixWrapper()
 const suffixWrapperClassName = suffixWrapper()
 
-export const TextLink: TextLinkComponent = forwardRef(
+const ActualTextLink: TextLinkComponent = forwardRef(
   <T extends ElementType = 'a'>(
     {
       elementAs,
@@ -116,3 +117,5 @@ export const TextLink: TextLinkComponent = forwardRef(
     )
   },
 )
+
+export const TextLink = memo(ActualTextLink) as typeof ActualTextLink

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

@@ -101,10 +101,12 @@ const calculateIdealRows = (
   if (!element) {
     return 0
   }
+
   // 現在の入力値に応じた行数
   const currentInputValueRows = Math.floor(
     element.scrollHeight / (defaultHtmlFontSize * Number(lineHeight.normal)),
   )
+
   return currentInputValueRows < maxRows ? currentInputValueRows : maxRows
 }
 
@@ -251,42 +253,41 @@ export const Textarea = forwardRef<HTMLTextAreaElement, Props & ElementProps>(
       [autoResize, maxRows, onInput, rows],
     )
 
-    const { textareaStyleProps, counterStyle, counterTextStyle } = useMemo(() => {
+    const textareaStyle = useMemo(
+      () => ({ width: typeof width === 'number' ? `${width}px` : width }),
+      [width],
+    )
+    const countError = maxLetters && count > maxLetters
+    const classNames = useMemo(() => {
       const { textareaEl, counter, counterText } = textarea()
+
       return {
-        textareaStyleProps: {
-          className: textareaEl({ className }),
-          style: { width: typeof width === 'number' ? `${width}px` : width },
-        },
-        counterStyle: counter(),
-        counterTextStyle: counterText({ error: !!(maxLetters && maxLetters - count < 0) }),
+        textarea: textareaEl({ className }),
+        counter: counter(),
+        counterText: counterText({ error: !!countError }),
       }
-    }, [className, count, maxLetters, width])
-
-    const hasInputError = useMemo(() => {
-      const isCharLengthExceeded = maxLetters && count > maxLetters
-      return error || isCharLengthExceeded || undefined
-    }, [error, maxLetters, count])
+    }, [countError, className])
 
     const body = (
       <textarea
         {...props}
-        {...textareaStyleProps}
         {...(maxLetters && { 'aria-describedby': `${maxLettersNoticeId} ${actualMaxLettersId}` })}
         data-smarthr-ui-input="true"
         onChange={handleChange}
         ref={textareaRef}
-        aria-invalid={hasInputError || undefined}
+        aria-invalid={error || countError || undefined}
         rows={interimRows}
         onInput={handleInput}
+        className={classNames.textarea}
+        style={textareaStyle}
       />
     )
 
     return maxLetters ? (
       <span>
         {body}
-        <span className={counterStyle}>
-          <span className={counterTextStyle} id={actualMaxLettersId} aria-hidden={true}>
+        <span className={classNames.counter}>
+          <span className={classNames.counterText} id={actualMaxLettersId} aria-hidden={true}>
             {counterVisualMessage}
           </span>
         </span>

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

@@ -1,10 +1,10 @@
-import React, { type ComponentProps, useMemo } from 'react'
+import React, { type ComponentProps, memo, useMemo } from 'react'
 import { VariantProps, tv } from 'tailwind-variants'
 
 import { FaArrowLeftIcon } from '../Icon'
 import { TextLink } from '../TextLink'
 
-const styleGenerator = tv({
+const classNameGenerator = tv({
   base: 'shr-leading-none',
   variants: {
     indent: {
@@ -15,17 +15,20 @@ const styleGenerator = tv({
 })
 
 type Props = Omit<ComponentProps<typeof TextLink>, 'prefix' | 'suffix'> &
-  VariantProps<typeof styleGenerator> & {
+  VariantProps<typeof classNameGenerator> & {
     /** `TextLink`に渡す `elementAs` をオプションで指定 */
     elementAs?: ComponentProps<typeof TextLink>['elementAs']
   }
 
-export const UpwardLink: React.FC<Props> = ({ indent = true, className, elementAs, ...rest }) => {
-  const style = useMemo(() => styleGenerator({ indent, className }), [indent, className])
+export const UpwardLink = memo<Props>(({ indent, className, ...rest }) => {
+  const actualClassName = useMemo(
+    () => classNameGenerator({ indent: indent ?? true, className }),
+    [indent, className],
+  )
 
   return (
-    <div className={style}>
-      <TextLink {...rest} elementAs={elementAs} prefix={<FaArrowLeftIcon />} />
+    <div className={actualClassName}>
+      <TextLink {...rest} prefix={<FaArrowLeftIcon />} />
     </div>
   )
-}
+})

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

@@ -1,7 +1,7 @@
-import React, { ComponentProps, PropsWithChildren, useMemo } from 'react'
+import React, { type ComponentProps, type PropsWithChildren, memo, useMemo } from 'react'
 import { tv } from 'tailwind-variants'
 
-export const visuallyHiddenText = tv({
+export const visuallyHiddenTextClassNameGenerator = tv({
   base: 'shr-absolute -shr-top-px shr-left-0 shr-h-px shr-w-px shr-overflow-hidden shr-whitespace-nowrap shr-border-0 shr-p-0 [clip-path:inset(100%)] [clip:rect(0_0_0_0)]',
 })
 
@@ -10,12 +10,17 @@ type Props<T extends React.ElementType> = PropsWithChildren<{
 }> &
   ComponentProps<T>
 
-export const VisuallyHiddenText = <T extends React.ElementType = 'span'>({
+const ActualVisuallyHiddenText = <T extends React.ElementType = 'span'>({
   as: Component = 'span',
   className,
   ...props
 }: Props<T>) => {
-  const styles = useMemo(() => visuallyHiddenText({ className }), [className])
+  const actualClassName = useMemo(
+    () => visuallyHiddenTextClassNameGenerator({ className }),
+    [className],
+  )
 
-  return <Component {...props} className={styles} />
+  return <Component {...props} className={actualClassName} />
 }
+
+export const VisuallyHiddenText = memo(ActualVisuallyHiddenText) as typeof ActualVisuallyHiddenText

packages/smarthr-ui/src/components/VisuallyHiddenText/index.ts

@@ -1 +1 @@
-export { VisuallyHiddenText, visuallyHiddenText } from './VisuallyHiddenText'
+export { VisuallyHiddenText, visuallyHiddenTextClassNameGenerator } from './VisuallyHiddenText'