Membuat Infinite Scroll di React

Dalam pengembangan aplikasi web modern, Infinite Scroll menjadi fitur yang semakin populer karena memberikan pengalaman pengguna (UX) yang lebih mulus. Dengan teknik ini, konten akan terus dimuat secara otomatis saat pengguna menggulir halaman ke bawah, tanpa perlu menekan tombol “Load More”. Infinite Scroll sering digunakan di platform besar seperti Instagram, Facebook, Twitter, dan YouTube Feed.

Di React, kita bisa membangun fitur Infinite Scroll dengan sangat sederhana menggunakan Intersection Observer API tanpa perlu library tambahan. Intersection Observer memungkinkan kita memantau elemen di viewport dan mendeteksi saat user mencapai bagian bawah halaman. Pada tutorial ini, kita akan belajar cara membuat Infinite Scroll dari nol dengan React Hooks, memuat data secara bertahap dari API, dan menggabungkannya menjadi feed dinamis yang ringan dan efisien.

Apa itu Infinite Scroll di React?

Infinite Scroll di React adalah teknik di mana data atau konten akan otomatis dimuat saat pengguna menggulir halaman ke bawah, tanpa perlu menekan tombol "Load More". Teknik ini sangat berguna untuk menampilkan daftar panjang data seperti feed artikel, galeri gambar, atau produk e-commerce secara dinamis dan efisien.

Di dalam React, Infinite Scroll biasanya dibuat dengan memanfaatkan Intersection Observer API yang dapat mendeteksi apakah sebuah elemen (biasanya di bagian bawah halaman) sedang terlihat di layar. Saat elemen tersebut terlihat, React akan memuat data tambahan dari API dan menambahkannya ke dalam daftar data yang sudah ditampilkan.

Keunggulan Infinite Scroll dibandingkan pagination biasa adalah pengalaman pengguna yang lebih seamless karena data akan terus muncul saat mereka scroll tanpa interupsi. Namun, implementasinya perlu diperhatikan agar tidak membebani performa aplikasi, misalnya dengan menerapkan lazy loading, loading indicator, atau menghentikan load saat data sudah habis.

Konsep Kerja Infinite Scroll di React:

1. Load data pertama (page 1)
2. Pantau apakah user sudah mencapai bagian bawah halaman (pakai Intersection Observer)
3. Jika sudah, fetch data halaman berikutnya (page 2, 3, dst)
4. Gabungkan data baru ke data sebelumnya (state array)
5. Ulangi hingga data habis

Step 1: Setup React Project (Vite + Tailwind CSS Optional)

1.1 Buat Project React

npx create-vite@latest infinite-scroll-app --template react
cd infinite-scroll-app
npm install

1.2 (Optional) Install Tailwind CSS

Kalau mau UI lebih rapi:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Atur tailwind.config.js:

export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: { extend: {} },
  plugins: [],
}

Import Tailwind di src/index.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

Step 2: Struktur Folder

src/
 ├── components/
 │     └── PostList.jsx   // Komponen utama Infinite Scroll
 ├── App.jsx
 └── index.css

Step 3: Buat Komponen Infinite Scroll (PostList.jsx)

Kode Lengkap src/components/PostList.jsx:

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

const PostList = () => {
  const [posts, setPosts] = useState([]);  // Menyimpan data posts
  const [page, setPage] = useState(1);     // Menyimpan halaman saat ini
  const [loading, setLoading] = useState(false);  // Status loading
  const loader = useRef(null);  // Ref untuk loader div di bawah

  // Function untuk fetch data dari API
  const fetchPosts = async () => {
    setLoading(true);
    const res = await fetch(`https://jsonplaceholder.typicode.com/posts?_limit=10&_page=${page}`);
    const data = await res.json();
    setPosts((prev) => [...prev, ...data]); // Gabungkan data lama & baru
    setLoading(false);
  };

  // Fetch data saat page pertama kali render & setiap page berubah
  useEffect(() => {
    fetchPosts();
  }, [page]);

  // Intersection Observer untuk mendeteksi scroll ke bawah
  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        if (entries[0].isIntersecting && !loading) {
          setPage((prev) => prev + 1);  // Tambah page jika loader terlihat
        }
      },
      { threshold: 1 }  // Loader harus 100% terlihat
    );

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

    return () => {
      if (loader.current) {
        observer.unobserve(loader.current);
      }
    };
  }, [loading]);

  return (
    
      Infinite Scroll Posts
      {posts.map((post) => (
        
          {post.title}
          {post.body}
        
      ))}
      {loading && Loading...}
       {/* Loader Trigger */}
    
  );
};

export default PostList;

Step 4: Panggil Komponen di App.jsx

Ubah src/App.jsx:

import PostList from './components/PostList';

function App() {
  return (
    
      
    
  );
}

export default App;

Step 5: Jalankan Aplikasi

npm run dev

• Buka di browser → http://localhost:5173
• Scroll ke bawah → Data akan otomatis bertambah saat mencapai bawah.

Penjelasan Per Bagian:

Step 6: Handle Data Habis (Optional)

Kalau datanya sudah habis (misal API hanya ada 100 post):
Tambahkan kondisi agar observer berhenti.

Contoh:

if (data.length === 0) {
  observer.unobserve(loader.current);
}

Bonus: Tips Tambahan

• Pakai Skeleton Loader saat loading agar UX lebih smooth.
• Bisa menggunakan react-query atau swr untuk data fetching lebih advance.
• Jangan lupa debounce/memoize observer bila data API besar.

Kesimpulan

Infinite Scroll adalah teknik penting yang membuat data di-load otomatis saat user scroll ke bawah, tanpa tombol "Load More". Dengan React dan Intersection Observer API, kamu bisa membangun Infinite Scroll yang ringan dan efisien tanpa library tambahan. Teknik ini cocok digunakan untuk feed artikel, galeri gambar, hingga katalog produk, karena memudahkan user menjelajah konten secara seamless. Di tutorial ini, kamu telah belajar bagaimana cara mem-fetch data bertahap, mendeteksi scroll ke bawah, dan menggabungkan data baru ke state React agar aplikasi kamu lebih interaktif dan modern.