refactor(LineClamp): childrenを依存配列から削除しResizeObserverを使用

[AtsushiM]

関連URL

なし

概要

eslint-config-smarthr@14.7.0で追加されたsmarthr/best-practice-for-unstable-dependenciesルールにより、useEffectの依存配列に不安定な参照であるchildrenが含まれていることが警告されるようになりました。

childrenは参照が頻繁に変わるため、依存配列に含めると不要な再実行や無限ループの原因となる可能性があります。

変更内容

• useEffectの依存配列からchildrenを削除
• ResizeObserverを追加して表示要素（ref）と高さ計測用要素（shadowRef）のサイズ変更を監視
• 内容が変わってサイズが変わった際も、ResizeObserverが検知して適切に再計算

Before

useEffect(() => {
  const el = ref.current
  const shadowEl = shadowRef.current

  const isMultiLineOverflow = el && shadowEl ? shadowEl.clientHeight > el.clientHeight : false

  setTooltipVisible(isMultiLineOverflow)
}, [maxLines, children]) // childrenが不安定な参照

After

useEffect(() => {
  const el = ref.current
  const shadowEl = shadowRef.current

  if (!el || !shadowEl) return

  const checkOverflow = () => {
    const isMultiLineOverflow = shadowEl.clientHeight > el.clientHeight
    setTooltipVisible(isMultiLineOverflow)
  }

  checkOverflow()

  const resizeObserver = new ResizeObserver(checkOverflow)
  resizeObserver.observe(el)
  resizeObserver.observe(shadowEl)

  return () => {
    resizeObserver.unobserve(el)
    resizeObserver.unobserve(shadowEl)
  }
}, [maxLines]) // childrenを削除

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

なし

確認方法

• 既存のテストが通ることを確認
• Storybookで行数制限されたテキストの動作を確認
• 内容が動的に変わる場合のツールチップ表示を確認

[pkg-pr-new]

Open in StackBlitz

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

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

commit: d6faede