कोडिंग शुरू करने से पहले, यदि आप इस बारे में अधिक जानना चाहते हैं कि पेजिनेशन क्या है और हमें इसकी आवश्यकता क्यों है, तो यहां मेरा ब्लॉग देखें।

मान लें कि स्क्रीन पर 50 आइटम प्रदर्शित करने के लिए कहा गया है और जब भी उपयोगकर्ता नीचे पहुंचे, तो अगले 50 आइटम लोड करें।
इसके लिए हमें स्क्रॉल स्थिति पर नज़र रखनी होगी और इसकी तुलना दस्तावेज़ के मुख्य भाग ऑफ़सेटहाइट से करते रहना होगा।

स्क्रॉल स्थिति प्राप्त करने के लिए, हम window.scrollY का उपयोग करेंगे।
मूल रूप से window.scrollY पृष्ठ को ऊपर से लंबवत स्क्रॉल किए गए पिक्सेल की संख्या देता है। यह आपको बताता है कि उपयोगकर्ता ने पृष्ठ को कितनी नीचे तक स्क्रॉल किया है।
window.scrollY के साथ, हम यह जांचने के लिए दो और मानों का उपयोग करेंगे कि उपयोगकर्ता पृष्ठ के नीचे तक पहुंच गया है या नहीं।
window.innerHeight: यह विंडो के दृश्य भाग (व्यूपोर्ट) की ऊंचाई का प्रतिनिधित्व करता है। यह उस क्षेत्र की ऊंचाई है जिसे उपयोगकर्ता वर्तमान में बिना स्क्रॉल किए ब्राउज़र में देख सकता है।

document.body.offsetHeight: यह शरीर के तत्व की कुल ऊंचाई देता है।

कोड:

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

स्पष्टीकरण: पेज का पहला रेंडर यूज़इफेक्ट हुक को ट्रिगर करेगा जो एक स्क्रॉल इवेंट जोड़ देगा। जब भी स्क्रॉलिंग घटना होगी, ऑनस्क्रॉल() विधि लागू की जाएगी और यह स्क्रॉल की स्थिति की जांच करेगी। यदि यह निचले-40 पर है, तो आइटम स्थिति में 50 आइटम और जोड़ दिए जाते हैं।