Прежде чем мы начнем программировать, если вы хотите узнать больше о том, что такое нумерация страниц и зачем она нам нужна, посетите мой блог здесь.

Предположим, требуется отобразить 50 элементов на экране, и всякий раз, когда пользователь достигает нижней части экрана, загружается следующие 50 элементов.
Для этого нам нужно отслеживать положение прокрутки и продолжать сравнивать его с смещениемHeight тела документа.

Чтобы получить позицию прокрутки, мы будем использовать window.scrollY.
По сути, window.scrollY дает количество пикселей, на которое страница была прокручена вертикально сверху. Он сообщает вам, как далеко вниз страницу прокрутил пользователь.
Наряду с window.scrollY мы будем использовать еще два значения, чтобы проверить, достиг ли пользователь нижней части страницы или нет.
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 элементов.