Avant de commencer à coder, si vous voulez en savoir plus sur ce qu'est la pagination et pourquoi en avons-nous besoin, consultez mon blog ici.

Disons que la demande est d'afficher 50 éléments à l'écran et que chaque fois que l'utilisateur atteint le bas, charge les 50 éléments suivants.
Pour cela, nous devons garder une trace de la position de défilement et continuer à la comparer avec le corps du document offsetHeight.

Pour obtenir la position de défilement, nous utiliserons window.scrollY.
Fondamentalement, window.scrollY donne le nombre de pixels sur lesquels la page a défilé verticalement à partir du haut. Il vous indique jusqu'où l'utilisateur a parcouru la page.
En plus de window.scrollY, nous utiliserons deux valeurs supplémentaires pour vérifier si l'utilisateur a atteint le bas de la page ou non.
window.innerHeight : Ceci représente la hauteur de la partie visible de la fenêtre (la fenêtre). Il s'agit de la hauteur de la zone que l'utilisateur peut actuellement voir dans le navigateur sans faire défiler.

document.body.offsetHeight: Il donne la hauteur totale de l'élément body.

Code:

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

Explication : Le premier rendu de la page déclenchera le hook useEffect qui ajoutera un événement de défilement. Chaque fois qu'un événement de défilement se produit, la méthode onScroll() sera invoquée et vérifiera la position du défilement. S'il se trouve parmi les 40 derniers, alors 50 éléments supplémentaires sont ajoutés à l'état des éléments.