React Intersection Observer for Infinity Scrolling 2025

React Intersection Observer for Infinity Scrolling 2025

React mein Infinity Scrolling implement karne ke liye hum Intersection Observer API ka use karte hain. Yeh API hume yeh detect karne mein madad karta hai ki koi element viewport ke andar aaya hai ya nahi. Jab yeh element visible hota hai, hum naye data ko fetch kar lete hain.

Steps:

• IntersectionObserver ko use karne ke liye hum ek ref create karte hain.
• Observer ke through hum check karte hain ki kya target element visible hai.
• Agar visible hai, toh hum next page ka data fetch karte hain (like infinite scroll).

Installation:

npm install @tanstack/react-query

Example Code:

import React, { useEffect, useRef } from "react";
import { useInfiniteQuery } from "@tanstack/react-query";
import axios from "axios";

const fetchPosts = async ({ pageParam = 1 }) => {
  const res = await axios.get(
    `https://jsonplaceholder.typicode.com/posts?_limit=10&_page=${pageParam}`
  );
  return res.data;
};

const InfiniteScroll = () => {
  const {
    data,
    fetchNextPage,
    hasNextPage,
    isFetchingNextPage,
  } = useInfiniteQuery({
    queryKey: ["posts"],
    queryFn: fetchPosts,
    getNextPageParam: (lastPage, allPages) => {
      return allPages.length + 1;
    },
  });

  const loaderRef = useRef();

  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        if (entries[0].isIntersecting && hasNextPage) {
          fetchNextPage();
        }
      },
      { threshold: 1 }
    );

    if (loaderRef.current) {
      observer.observe(loaderRef.current);
    }

    return () => {
      if (loaderRef.current) observer.unobserve(loaderRef.current);
    };
  }, [fetchNextPage, hasNextPage]);

  return (
    

      {data?.pages.map((group, i) => (
        
          {group.map((post) => (
            

              
{post.title}
              
{post.body}
            
          ))}
        
      ))}
      

        {isFetchingNextPage ? "Loading more..." : "Scroll down to load more"}
      
    
  );
};

export default InfiniteScroll;

Conclusion:

Intersection Observer ke use se React mein Infinite Scrolling easily implement ho jata hai bina manually scroll handle kiye. React Query ke saath integration ise aur efficient banata hai.