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

[AtsushiM]

関連URL

なし

概要

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

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

変更内容

• useEffectの依存配列からchildrenを削除
• ResizeObserverを追加してスクロール領域のサイズ変更を監視
• 内容が変わってサイズが変わった際も、ResizeObserverが検知して適切に再計算

Before

useEffect(() => {
  autoTabIndex()
}, [children, autoTabIndex]) // childrenが不安定な参照

After

useEffect(() => {
  autoTabIndex()
  
  const refCurrent = wrapperRef.current
  if (!refCurrent) return
  
  const resizeObserver = new ResizeObserver(autoTabIndex)
  resizeObserver.observe(refCurrent)
  
  return () => {
    resizeObserver.unobserve(refCurrent)
  }
}, [autoTabIndex]) // childrenを削除

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

なし

確認方法

• 既存のテストが通ることを確認
• Storybookでスクロール可能な要素の動作を確認
• 内容が動的に変わる場合（Paginationなど）の動作を確認

[pkg-pr-new]

Open in StackBlitz

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

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

commit: 4a263a8