Membuat Infinite Scroll di React dengan TanStack Query

Infinite scroll adalah teknik memuat data secara bertahap ketika pengguna menggulir halaman ke bawah. Fitur ini umum ditemukan pada media sosial seperti Instagram, Twitter, atau Facebook, di mana konten terus muncul tanpa harus menekan tombol "Next Page". Dengan React dan TanStack Query, kita bisa membuat infinite scroll dengan mudah dan performa yang optimal.

1. Persiapan Project

Sebelum memulai, pastikan kita sudah menyiapkan project React dan menginstal TanStack Query.

npm install @tanstack/react-query

Kita juga akan menggunakan Axios untuk mengambil data dari API.

npm install axios

2. Struktur Dasar Project

Misalnya kita ingin menampilkan daftar post dari API placeholder (https://jsonplaceholder.typicode.com/posts), maka kita bisa membuat struktur seperti ini:

src/
 ├─ App.jsx
 ├─ PostList.jsx
 ├─ api.js

3. Membuat Fungsi Fetch Data

Buat file api.js untuk mengambil data.

import axios from 'axios';

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

4. Menggunakan useInfiniteQuery

Di PostList.jsx, kita akan menggunakan hook useInfiniteQuery untuk memuat data per halaman.

import React, { useRef, useEffect } from 'react';
import { useInfiniteQuery } from '@tanstack/react-query';
import { fetchPosts } from './api';

const PostList = () => {
  const {
    data,
    fetchNextPage,
    hasNextPage,
    isFetchingNextPage,
    status
  } = useInfiniteQuery(
    ['posts'],
    fetchPosts,
    {
      getNextPageParam: (lastPage, pages) => {
        if (lastPage.length === 0) return undefined;
        return pages.length + 1;
      }
    }
  );

  const observerRef = useRef();

  useEffect(() => {
    if (!hasNextPage) return;
    const observer = new IntersectionObserver(
      entries => {
        if (entries[0].isIntersecting) {
          fetchNextPage();
        }
      },
      { threshold: 1 }
    );
    if (observerRef.current) observer.observe(observerRef.current);
    return () => {
      if (observerRef.current) observer.unobserve(observerRef.current);
    };
  }, [hasNextPage, fetchNextPage]);

  if (status === 'loading') return Loading...;
  if (status === 'error') return Error loading data;

  return (
    

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

{post.title}

{post.body}

         ))}              ))}      

     {isFetchingNextPage && 

Loading more...

}    

 ); }; export default PostList;

5. Menggunakan di App.jsx

Terakhir, hubungkan semuanya di App.jsx dengan QueryClientProvider.

import React from 'react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import PostList from './PostList';

const queryClient = new QueryClient();

function App() {
  return (
    
      Infinite Scroll dengan TanStack Query
      
    
  );
}

export default App;

Kesimpulan

Membuat Infinite Scroll di React dengan TanStack Query sangat membantu untuk menampilkan data panjang secara efisien tanpa membuat pengguna menunggu load besar di awal.
Dengan kombinasi useInfiniteQuery dan IntersectionObserver, kita bisa membuat pengalaman scrolling yang mulus dan hemat resource.
Teknik ini cocok dipakai untuk feed media sosial, daftar produk e-commerce, atau artikel blog yang terus bertambah.