react-infinite-scroller と @types/react-infinite-scroller が React 19 に対応していなかったため、独自の useInfiniteScroll フックへ移行した。

移行前:

<InfiniteScroll loadMore={fetchNextPage} hasMore={hasNextPage}>
  {items.map(...)}
</InfiniteScroll>

移行後:

const { sentinelRef } = useInfiniteScroll({
  hasMore: !!hasNextPage,
  isLoading: isFetchingNextPage,
  onLoadMore: () => void fetchNextPage(),
});

{items.map(...)}
<div ref={sentinelRef} />

実装のポイント:

• ラッパーコンポーネント方式からフック方式に変更
• スクロールイベント + getBoundingClientRect() で sentinel 要素の位置を検知
• passive: true でスクロール性能を確保
• threshold（デフォルト100px）で読み込みタイミングを調整可能

外部依存を減らしつつ、必要最小限のシンプルな実装で React 19 との互換性を確保できた。