Antes de comenzar a codificar, si quieres saber más sobre qué es la paginación y por qué la necesitamos, consulta mi blog aquí.

Supongamos que la petición es mostrar 50 elementos en la pantalla y cada vez que el usuario llegue al final, cargue los siguientes 50 elementos.
Para eso necesitamos realizar un seguimiento de la posición de desplazamiento y seguir comparándola con el cuerpo del documento offsetHeight.

Para obtener la posición de desplazamiento, usaremos window.scrollY.
Básicamente, window.scrollY proporciona la cantidad de píxeles que la página se ha desplazado verticalmente desde la parte superior. Le indica qué tan abajo en la página se ha desplazado el usuario.
Junto con window.scrollY, usaremos dos valores más para verificar si el usuario ha llegado al final de la página o no.
window.innerHeight: Esto representa la altura de la parte visible de la ventana (la ventana gráfica). Es la altura del área que el usuario puede ver actualmente en el navegador sin desplazarse.

document.body.offsetHeight: Da la altura total del elemento del cuerpo.

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

Explicación: La primera representación de la página activará el gancho useEffect que agregará un evento de desplazamiento. Siempre que ocurra un evento de desplazamiento, se invocará el método onScroll() y comprobará la posición del desplazamiento. Si está entre los 40 últimos, se agregan más de 50 elementos al estado de los elementos.