refactor(Pagination): onClickの依存配列問題を解決

[AtsushiM]

関連URL

なし

概要

ESLint ルール smarthr/best-practice-for-unstable-dependencies で onClick が依存配列に含まれることによるエラーを解消するため、onClick を ref に保存し、hrefTemplate を boolean に変換して依存配列を安定化しました。

変更内容

Before

const onDelegateClick = useMemo(() => {
  if (!onClick) {
    return undefined
  }

  if (hrefTemplate) {
    return (e: MouseEvent<HTMLElement>) => {
      const anchor = getTargetDelegateElement(e, ANCHOR_REGEX)
      if (!anchor) {
        return
      }
      const href = (anchor as HTMLAnchorElement).href
      if (href) {
        onClick(href, e)
      }
    }
  }

  return (e: MouseEvent<HTMLElement>) => {
    const button = getTargetDelegateElement(e, BUTTON_REGEX)
    if (button) {
      onClick(parseInt((button as HTMLButtonElement).value, 10), e)
    }
  }
}, [onClick, hrefTemplate])

After

const onClickRef = useRef(onClick)
onClickRef.current = onClick
const hasHrefTemplate = !!hrefTemplate

const onDelegateClick = useMemo(() => {
  if (!onClickRef.current) {
    return undefined
  }

  if (hasHrefTemplate) {
    return (e: MouseEvent<HTMLElement>) => {
      const anchor = getTargetDelegateElement(e, ANCHOR_REGEX)
      if (!anchor) {
        return
      }
      const href = (anchor as HTMLAnchorElement).href
      if (href) {
        onClickRef.current?.(href, e)
      }
    }
  }

  return (e: MouseEvent<HTMLElement>) => {
    const button = getTargetDelegateElement(e, BUTTON_REGEX)
    if (button) {
      onClickRef.current?.(parseInt((button as HTMLButtonElement).value, 10), e)
    }
  }
}, [hasHrefTemplate])

• onClick（関数、unstable）を ref に保存
• hrefTemplate（関数、unstable）を hasHrefTemplate（boolean、stable）に変換
• 依存配列を [hasHrefTemplate] のみに

プロダクト側で対応が必要な事項

なし

確認方法

• 既存のテストが通ることを確認
• Storybook で Pagination のページ遷移が正常に動作することを確認

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/@smarthr/smarthr-ui-charts@6420

npm i https://pkg.pr.new/smarthr-ui@6420

commit: edaf7d8