Bevor wir mit dem Codieren beginnen: Wenn Sie mehr darüber wissen möchten, was Paginierung ist und warum wir sie brauchen, schauen Sie sich hier meinen Blog an.

Angenommen, die Aufgabe besteht darin, 50 Elemente auf dem Bildschirm anzuzeigen und die nächsten 50 Elemente zu laden, wenn der Benutzer ganz nach unten gelangt.
Dazu müssen wir die Scrollposition im Auge behalten und sie ständig mit der OffsetHeight des Dokumentkörpers vergleichen.

Um die Scroll-Position zu erhalten, verwenden wir window.scrollY.
Grundsätzlich gibt window.scrollY die Anzahl der Pixel an, um die die Seite vertikal von oben gescrollt wurde. Hier erfahren Sie, wie weit der Benutzer auf der Seite nach unten gescrollt hat.
Zusammen mit window.scrollY verwenden wir zwei weitere Werte, um zu überprüfen, ob der Benutzer das Ende der Seite erreicht hat oder nicht.
window.innerHeight: Dies stellt die Höhe des sichtbaren Teils des Fensters (des Ansichtsfensters) dar. Dies ist die Höhe des Bereichs, den der Benutzer derzeit im Browser sehen kann, ohne zu scrollen.

document.body.offsetHeight: Gibt die Gesamthöhe des Körperelements an.

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

Erklärung: Das erste Rendern der Seite löst den useEffect-Hook aus, der ein Scroll-Ereignis hinzufügt. Immer wenn ein Bildlaufereignis auftritt, wird die Methode onScroll() aufgerufen und überprüft die Position des Bildlaufs. Wenn es sich bei den unteren 40 befindet, werden dem Artikelstatus weitere 50 Artikel hinzugefügt.