Antes de começarmos a codificar, se você quiser saber mais sobre o que é paginação e por que precisamos dela, confira meu blog aqui.

Digamos que a solicitação seja exibir 50 itens na tela e sempre que o usuário chegar ao final, carregue os próximos 50 itens.
Para isso precisamos acompanhar a posição de rolagem e compará-la com o offsetHeight do corpo do documento.

Para obter a posição de rolagem, usaremos window.scrollY.
Basicamente window.scrollY fornece o número de pixels que a página foi rolada verticalmente a partir do topo. Ele informa até que ponto o usuário rolou na página.
Junto com window.scrollY, usaremos mais dois valores para verificar se o usuário chegou ao final da página ou não.
window.innerHeight: Isso representa a altura da parte visível da janela (a janela de visualização). É a altura da área que o usuário pode ver atualmente no navegador sem rolar.

document.body.offsetHeight: Fornece a altura total do elemento body.

Código:

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)}
;
}

Explicação: A primeira renderização da página acionará o gancho useEffect que adicionará um evento de rolagem. Sempre que ocorrer um evento de rolagem, o método onScroll() será invocado e verificará a posição da rolagem. Se estiver na parte inferior 40, mais 50 itens serão adicionados ao estado dos itens.