মডার্ন ওয়েব অ্যাপে লোডিং পারফরম্যান্স ও ব্যবহারকারীর অভিজ্ঞতা বাড়াতে ইনফিনিটি স্ক্রোল গুরুত্বপূর্ণ টেকনিক। React.JS-এ সহজ ও নির্ভরযোগ্যভাবে ইনফিনিটি স্ক্রোল বাস্তবায়নের সবচেয়ে কার্যকর উপায় হলো Intersection Observer API ব্যবহার করা — DOM-এ নির্দিষ্ট এলিমেন্টের ভিউপোর্টে আসা/না-আসা পর্যবেক্ষণ করে অপ্রয়োজনীয় scroll-listener বাদ দিয়ে লোড ট্রিগার করা হয়। এই আর্টিকেলে স্টেপ-বাই-স্টেপ কৌশল, কোড প্যাটার্ন, পারফরম্যান্স টিপস ও ১০টি গুরুত্বপূর্ণ FAQ দেয়া হলো।

---

স্টেপ-বাই-স্টেপ গাইড

1. প্রজেক্ট সেটআপ

• নতুন React অ্যাপ তৈরি করুন (npx create-react-app my-app) বা আপনার বিদ্যমান প্রোজেক্ট ব্যবহার করুন।
• HTTP ক্লায়েন্ট (fetch/axios) ইনস্টল করুন এবং সার্ভার থেকে pagination সাপোর্ট আছে কি না নিশ্চিত করুন।

2. বেসিক লে-আউট

• একটি লিস্ট কম্পোনেন্ট (List.js) বানান যা আইটেম রেন্ডার করবে।
• লিস্টের শেষে একটি sentinel নামে ছোট <div> রাখুন — এটাই observer লক্ষ্য করবে।

3. observer তৈরি করা ও attach করা

• useRef দিয়ে sentinel-এর রেফারেন্স রাখুন।
• useEffect-এ new IntersectionObserver(callback, options) ইনিশিয়েট করুন।
• callback-এ যখন sentinel ভিউপোর্টে আসবে তখন loadMore ফাংশন কল করুন।
• কোডে observer api ব্যবহার করে sentinel.attach করুন এবং ক্লিনআপে observer.disconnect() করুন।

4. loadMore ও state ম্যানেজমেন্ট

• পেজ বা কার্সর ট্র্যাক করুন (page / nextCursor)।
• isLoading boolean রাখুন যাতে ডাবল রিকোয়েস্ট না হয়।
• API থেকে ডেটা পাওয়া গেলে state-এ append করুন ও hasMore ফ্ল্যাগ আপডেট করুন।

5. ক্লিন আপ ও পারফরম্যান্স

• ক্লিনআপে observer.disconnect() নিশ্চিত করুন।
• throttle/debounce প্রয়োগ করুন (প্রয়োজনে)।
• ভার্চুয়ালাইজেশন (react-window) ব্যবহার করলে রেন্ডার লোড কমে।

6. SEO ও Accessibility

• ইনফিনিটি স্ক্রোল SEO-র জন্য সবসময় আদর্শ নয় — প্রয়োজন হলে সার্ভার-সাইড রেন্ডারিং বা পেজিং অপশন দিন।
• sentinel ও লোডিং স্ট্যাটাসের জন্য ARIA attribute ব্যবহার করুন।

7. Error handling

• নেটওয়ার্ক ত্রুটি ও retry স্ট্র্যাটেজি রাখুন।
• কনসোলে রিকোয়েস্ট লিমিট মনিটর করুন।

8. Cursor-based pagination (অপশনাল)

• বড় ডেটাসেটে cursor-pagination বেশি নির্ভরযোগ্য — skip/duplicate এড়ায়।

9. টেস্টিং ও মনিটরিং

• integration test লিখুন, load-testing চালান, এবং প্রোডাকশনে মনিটরিং যুক্ত করুন।

10. ডিবাগিং টিপস

• DevTools এ observer callback লগ করুন, sentinel-এর DOM স্ট্যাটাস চেক করুন (hidden হলে কাজ করবে না)।

---

প্র্যাকটিক্যাল কোড টেমপ্লেট

import { useEffect, useRef, useState } from "react";

export default function InfinitePosts() {
  const [posts, setPosts] = useState([]);
  const [page, setPage] = useState(1);
  const [hasMore, setHasMore] = useState(true);
  const [loading, setLoading] = useState(false);

  const sentinelRef = useRef(null);

  // -----------------------------
  // 📌 API থেকে ডেটা লোড
  // -----------------------------
  const loadMore = async () => {
    if (loading || !hasMore) return;

    setLoading(true);

    try {
      const res = await fetch(
        `https://fakestoreapiserver.reactbd.org/api/posts?page=${page}&perPage=10`
      );
      const data = await res.json();

      // API structure → { data: [...], pagination: { totalPages } }
      setPosts((prev) => [...prev, ...data.data]);

      if (page >= data.pagination.totalPages) {
        setHasMore(false);
      } else {
        setPage((prev) => prev + 1);
      }
    } catch (err) {
      console.error("Error loading data:", err);
    }

    setLoading(false);
  };

  // -----------------------------
  // 📌 Intersection Observer API
  // -----------------------------
  useEffect(() => {
    if (!sentinelRef.current) return;

    const observer = new IntersectionObserver(
      (entries) => {
        const firstEntry = entries[0];

        if (firstEntry.isIntersecting && hasMore && !loading) {
          loadMore();
        }
      },
      {
        root: null,
        rootMargin: "200px", // Early load trigger
        threshold: 1.0,
      }
    );

    observer.observe(sentinelRef.current);

    return () => observer.disconnect();
  }, [hasMore, loading]);

  // -----------------------------
  // 📌 প্রথমবার লোড
  // -----------------------------
  useEffect(() => {
    loadMore();
  }, []);

  return (
    <div
      style={{
        width: "600px",
        margin: "0 auto",
        paddingTop: "20px",
        fontFamily: "Arial",
      }}
    >
      <h2 style={{ textAlign: "center", marginBottom: "20px" }}>
        React Infinite Scroll (Observer API)
      </h2>

      {posts.map((post) => (
        <div
          key={post.id}
          style={{
            padding: "15px",
            marginBottom: "12px",
            border: "1px solid #ddd",
            borderRadius: "8px",
            background: "#fafafa",
          }}
        >
          <h3>{post.title}</h3>
          <p>{post.body}</p>
        </div>
      ))}

      {/* Sentinel (Observer Target) */}
      <div
        ref={sentinelRef}
        style={{
          height: "40px",
          margin: "20px 0",
          background: "transparent",
        }}
      ></div>

      {loading && (
        <p style={{ textAlign: "center", fontWeight: "bold" }}>Loading...</p>
      )}

      {!hasMore && (
        <p style={{ textAlign: "center", color: "gray" }}>
          ✔ সমস্ত পোস্ট লোড সম্পন্ন
        </p>
      )}
    </div>
  );
}

---

গুরুত্বপূর্ণ ১০টি FAQ

1. observer api কী এবং কেন ব্যবহার করবেন? observer api হলো ব্রাউজারের একটি আধুনিক টুল যা এলিমেন্ট ভিউপোর্টে আছে কি না সেটা পর্যবেক্ষণ করে — scroll ইভেন্ট-ভিত্তিক হেভি লিসেনার বাদ দিয়ে কার্যকর লোড ট্রিগার করে।

2. React.JS-এ এটা কীভাবে ইন্টিগ্রেট হবে? useRef ও useEffect দিয়ে sentinel-এ observer attach করে callback-এ loadMore কল করুন; state ম্যানেজমেন্ট ঠিক রাখুন।

3. ব্রাউজার সাপোর্ট কেমন? মোস্ট আধুনিক ব্রাউজারে সমর্থিত; পুরোনো ব্রাউজারের জন্য পলিফিল প্রয়োজন হতে পারে।

4. কত ঘন callback আসবে? threshold ও rootMargin কনফিগার করে নিয়ন্ত্রণ করা যায়; অতিরিক্ত কল কমাতে throttle ব্যবহার করুন।

5. ডাবল রিকোয়েস্ট কিভাবে আটকাবেন? isLoading ফ্ল্যাগ ও observer.disconnect() ব্যবহার করে duplicate রিকোয়েস্ট আটকান।

6. SEO সমস্যা আছে কি? ইনফিনিটি স্ক্রোল সার্চ ইঞ্জিনের কাছে সীমাবদ্ধ হতে পারে; প্রয়োজন হলে server-rendered পেজিং যোগ করুন।

7. Cursor-pagination কি ভাল? বড় ডেটাসেটে cursor-pagination বেশি স্থিতিশীল; page-pagination সহজ কিন্তু skip সমস্যা হতে পারে।

8. sentinel কোথায় রাখবেন? লিস্ট-কম্পোনেন্ট শেষে সরাসরি <div ref={sentinelRef} /> হিসেবে রাখুন, overflow:hidden কন্টেইনারে রাখার পর এ কাজ নাও করতে পারে।

9. ক্যাশিং করা উচিত কি? হ্যাঁ—প্রয়োজনে সার্ভার-সাইড বা ক্লায়েন্ট সাইড ক্যাশিং ব্যবহার করুন যাতে রিডান্ডেন্ট রিকোয়েস্ট কমে।

10. পরীক্ষা ও মনিটরিং কীভাবে করবেন? load-testing, integration test ও production monitoring যোগ করুন—performance metrics নিয়মিত পর্যবেক্ষণ করুন।

---

সাধারণ ভুল ও সমাধান (সংক্ষেপে)

• sentinel লুকানো থাকলে কাজ করবে না → DOM স্ট্রাকচার ঠিক করুন।
• বারবার callback আসলে loading flag ব্যবহার করুন।
• পুরোনো ব্রাউজারে পলিফিল ব্যবহার করুন কিন্তু পারফরম্যান্স নজর রাখুন।

---

React.JS-এ ইনফিনিটি স্ক্রোলের সবচেয়ে পরিষ্কার ও কার্যকর পদ্ধতি হচ্ছে Intersection Observer ব্যবহার করা। observer api ব্যবহার করলে scroll listener-এর ওভারহেড কমে, পারফরম্যান্স বাড়ে এবং battery/network impact কমে। উপরের স্টেপ-বাই-স্টেপ গাইড, best-practices, এবং FAQ মেনে চললে আপনি প্রোডাকশন-গ্রেড ইনফিনিটি স্ক্রোল সহজে তৈরি করতে পারবেন। শিখে নিন observer lifecycle, ক্লিনআপ ও pagination স্ট্র্যাটেজি—তারপর অ্যাপকে স্থিতিশীলভাবে স্কেল করুন।