অবশ্যই, রিঅ্যাক্টে Infinite Scroll বাস্তবায়নের উপর একটি বাংলা ব্লগ পোস্ট নিচে দেওয়া হলো।

React-এ implement করুন Infinite Scroll: যখন ডেটা শেষ, তখন লোডিংও শেষ!

আজকালকার ওয়েব অ্যাপ্লিকেশনগুলোতে ইউজার এক্সপেরিয়েন্স (UX) উন্নত করার জন্য নানা রকম কৌশল ব্যবহার করা হয়। তার মধ্যে অন্যতম জনপ্রিয় একটি ফিচার হলো Infinite Scroll। ফেসবুক, টুইটার বা ইন্সটাগ্রামের মতো সোশ্যাল মিডিয়া প্ল্যাটফর্মগুলোতে স্ক্রল করতে থাকলে নতুন নতুন কনটেন্ট যেভাবে লোড হতে থাকে, সেটিই হলো Infinite Scroll। এই ফিচারের ফলে ইউজারকে বারবার 'Next Page' বাটনে ক্লিক করতে হয় না।

এই ব্লগ পোস্টে আমরা শিখব কীভাবে React ব্যবহার করে একটি শক্তিশালী এবং কার্যকর Infinite Scroll ফিচার তৈরি করা যায়, যেখানে ডেটা শেষ হয়ে গেলে স্বয়ংক্রিয়ভাবে লোডিং বন্ধ হয়ে যাবে।

কেন Infinite Scroll ব্যবহার করবেন?

• Continuous User Experience: ব্যবহারকারীরা কোনো বাধা ছাড়াই কনটেন্ট দেখতে পারে, যা তাদের Engagement বাড়িয়ে তোলে।
• Performance: প্রাথমিকভাবে কেবল অল্প কিছু ডেটা লোড হয়, তাই পেজের প্রাথমিক লোড টাইম কমে যায়।
• Mobile-Friendly: মোবাইলের ছোট স্ক্রিনে Pagination-এর চেয়ে স্ক্রলিং অনেক বেশি সুবিধাজনক।

মূল কার্যপদ্ধতি

আমরা এই ফিচারটি বাস্তবায়নের জন্য Intersection Observer API ব্যবহার করব। এটি একটি আধুনিক এবং পারফরম্যান্স-ফ্রেন্ডলি এপিআই, যা দিয়ে সহজেই বোঝা যায় ইউজার পেজের একেবারে শেষে পৌঁছেছে কিনা।

আমাদের মূল ধাপগুলো হবে: ১. প্রয়োজনীয় State ভ্যারিয়েবල් তৈরি করা। ২. ডেটা Fetch করার জন্য একটি ফাংশন তৈরি করা। ৩. ইউজার স্ক্রল করে পেজের শেষে গেলে নতুন ডেটা লোড করা। ৪. যখন সার্ভার থেকে আর কোনো নতুন ডেটা আসবে না, তখন লোডিং বন্ধ করে দেওয়া।

চলুন কোডে যাওয়া যাক

প্রথমে, আমরা একটি কম্পোনেন্ট তৈরি করব এবং সেখানে প্রয়োজনীয় state-গুলো ডিক্লেয়ার করব।

import React, { useState, useEffect, useRef, useCallback } from "react";
 
function InfiniteScrollComponent() {
  const [items, setItems] = useState([]); // ডেটা সংরক্ষণের জন্য
  const [page, setPage] = useState(1); // বর্তমান পেজ নম্বর ট্র্যাক করার জন্য
  const [loading, setLoading] = useState(false); // লোডিং স্টেট ট্র্যাক করার জন্য
  const [hasMore, setHasMore] = useState(true); // আরও ডেটা আছে কিনা তা ট্র্যাক করার জন্য
 
  const observer = useRef();
 
  // ডেটা ফেচ করার ফাংশন
  const fetchItems = useCallback(async () => {
    if (loading || !hasMore) return; // লোডিং বা ডেটা শেষ হলে আর কল হবে না
 
    setLoading(true);
    try {
      // আপনার API এন্ডপয়েন্ট
      const response = await fetch(
        `https://api.example.com/data?page=${page}&limit=10`
      );
      const newItems = await response.json();
 
      setItems((prevItems) => [...prevItems, ...newItems]);
 
      // যদি নতুন ডেটা খালি আসে বা কম আসে, তার মানে ডেটা শেষ
      if (newItems.length === 0) {
        setHasMore(false);
      }
 
      setPage((prevPage) => prevPage + 1);
    } catch (error) {
      console.error("ডেটা ফেচ করতে সমস্যা হয়েছে:", error);
    } finally {
      setLoading(false);
    }
  }, [page, loading, hasMore]);
 
  useEffect(() => {
    fetchItems(); // কম্পোনেন্ট মাউন্ট হলে প্রথমবার ডেটা লোড হবে
  }, []); // শুধু প্রথমবার রান হবে
 
  // Intersection Observer সেটআপ
  const lastItemRef = useCallback(
    (node) => {
      if (loading) return;
      if (observer.current) observer.current.disconnect();
 
      observer.current = new IntersectionObserver((entries) => {
        if (entries[0].isIntersecting && hasMore) {
          fetchItems();
        }
      });
 
      if (node) observer.current.observe(node);
    },
    [loading, hasMore, fetchItems]
  );
 
  return (
    <div>
      <h1>Infinite Scroll Example</h1>
      <div className="item-container">
        {items.map((item, index) => {
          // সর্বশেষ আইটেমটিতে ref যুক্ত করা হচ্ছে
          if (items.length === index + 1) {
            return (
              <div ref={lastItemRef} key={item.id} className="item">
                {item.name}
              </div>
            );
          } else {
            return (
              <div key={item.id} className="item">
                {item.name}
              </div>
            );
          }
        })}
      </div>
      {loading && <p>লোড হচ্ছে...</p>}
      {!hasMore && <p>সব ডেটা লোড হয়ে গেছে।</p>}
    </div>
  );
}
 
export default InfiniteScrollComponent;

কোডের ব্যাখ্যা

১. State Management (useState):

• items: API থেকে পাওয়া ডেটাগুলো এই অ্যারেতে জমা হবে।
• page: আমরা কোন পেজের ডেটা আনব, তা ট্র্যাক করে।
• loading: ডেটা লোড হওয়ার সময় একটি লোডার দেখানোর জন্য এই স্টেট ব্যবহার করা হয়। এটি অপ্রয়োজনীয় API কলও রোধ করে।
• hasMore: এটি সবচেয়ে গুরুত্বপূর্ণ স্টেটগুলোর মধ্যে একটি। এর মাধ্যমে আমরা বুঝতে পারি সার্ভারে আরও ডেটা আছে কিনা। যখন API থেকে কোনো নতুন ডেটা আসে না, তখন আমরা hasMore-কে false করে দিই, যা পরবর্তী API কল বন্ধ করে দেয়।

২. ডেটা Fetching (fetchItems):

• এই async ফাংশনটি আমাদের এপিআই থেকে ডেটা নিয়ে আসে।
• ফাংশনের শুরুতে আমরা চেক করি loading অথবা !hasMore কিনা। যদি কোনো একটি সত্য হয়, তাহলে ফাংশনটি আর এগোবে না।
• ডেটা সফলভাবে লোড হওয়ার পর items অ্যারেতে নতুন ডেটা যোগ করা হয় এবং page নম্বর বাড়ানো হয়।
• সবচেয়ে গুরুত্বপূর্ণ অংশ হলো, যখন এপিআই থেকে পাওয়া newItems অ্যারেটি খালি থাকে, তখন আমরা setHasMore(false) কল করি। এর মানে হলো, ডেটা শেষ এবং আর কোনো API কল করার প্রয়োজন নেই।

৩. Intersection Observer (useRef ও useCallback):

• আমরা useRef ব্যবহার করে একটি observer তৈরি করেছি।
• lastItemRef হলো একটি callback ref। এই ref-কে আমরা আমাদের লিস্টের সর্বশেষ আইটেমের সাথে যুক্ত করে দিই।
• যখনই সর্বশেষ আইটেমটি ইউজারের স্ক্রিনে দৃশ্যমান (isIntersecting) হবে, IntersectionObserver কলব্যাকটি ফায়ার হবে এবং fetchItems() ফাংশনটিকে কল করবে।
• যখন hasMore false হয়ে যায়, তখন isIntersecting হলেও নতুন ডেটা আনার চেষ্টা করা হবে না।

শেষ কথা

এই পদ্ধতিতে আপনি আপনার React অ্যাপ্লিকেশনে একটি কার্যকর এবং পারফরম্যান্স-অপ্টিমাইজড Infinite Scroll ফিচার যুক্ত করতে পারবেন। Intersection Observer API-এর ব্যবহার এটিকে অনেক সহজ ও দক্ষ করে তোলে। সবচেয়ে বড় সুবিধা হলো, ডেটা শেষ হয়ে গেলে অযথা সার্ভারে রিকোয়েস্ট পাঠানো বন্ধ হয়ে যায়, যা আপনার অ্যাপ্লিকেশনের পারফরম্যান্স ঠিক রাখতে সাহায্য করে।

আশা করি এই ব্লগ পোস্টটি আপনাদের কাজে আসবে। হ্যাপি কোডিং!