コーディングを開始する前に、ページネーションとは何か、またページネーションが必要な理由について詳しく知りたい場合は、ここで私のブログをチェックしてください。

画面に 50 個の項目を表示し、ユーザーが一番下に到達するたびに次の 50 個の項目をロードするという要求があるとします。
そのためには、スクロール位置を追跡し、ドキュメント本体の offsetHeight.

スクロール位置を取得するには、window.scrollY.
を使用します。 基本的に window.scrollY は、ページが上から垂直にスクロールされたピクセル数を示します。ユーザーがページをどのくらい下までスクロールしたかを示します。
window.scrollY とともに、さらに 2 つの値を使用して、ユーザーがページの下部に到達したかどうかを確認します。
window.innerHeight: これは、ウィンドウの表示部分 (ビューポート) の高さを表します。これは、ユーザーが現在ブラウザーでスクロールせずに表示できる領域の高さです。

document.body.offsetHeight: body 要素の合計の高さを示します。

コード：

import { useState, useEffect } from "react";
import "./styles.css";
export default function App() {
  let query = [];
  let [items, setitems] = useState(50);
  for (let i = 1; i {i});
  }

  useEffect(() => {
    const onScroll = () => {
      if (
        window.innerHeight   window.scrollY >=
        document.body.offsetHeight - 40
      ) {
        setitems(items   50);
      }
    };

    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, [items]);

  return 
{query.map((q) => q)}
;
}

説明: ページの最初のレンダリングでは、スクロール イベントを追加する useEffect フックがトリガーされます。スクロール イベントが発生するたびに、onScroll() メソッドが呼び出され、スクロールの位置がチェックされます。下位 40 の場合は、さらに 50 個のアイテムがアイテムの状態に追加されます。