Blog

Web Development

Tutorial React Infinite Scroll: Langkah Mudah Implementasi

Irhan Hisyam Dwi Nugroho

•

08 September 2025

•

176

Infinite Scroll adalah fitur yang memungkinkan data dimuat otomatis saat menggulir halaman ke bawah, meningkatkan pengalaman pengguna tanpa perlu klik “load more.”

Di tutorial React Infinite Scroll ini, kami akan membimbing kamu langkah demi langkah, mulai dari persiapan hingga penerapan kode yang praktis dan mudah dipahami.

Yuk, simak cara mengoptimalkan aplikasi React kamu dengan Infinite Scroll! Tutorial ini akan membantumu memahami cara implementasi dan tips agar aplikasi tetap responsif.

Apa itu Infinite Scroll?

Infinite Scroll adalah teknik desain web yang memungkinkan konten baru dimuat secara otomatis saat pengguna menggulir halaman ke bawah, tanpa perlu menekan tombol “load more.”

Fitur ini biasanya digunakan di situs yang memiliki banyak data atau konten, seperti media sosial, e-commerce, atau berita online.

Dengan cara ini, pengguna bisa terus menjelajah tanpa terputus atau terganggu oleh halaman baru.

Infinite Scroll memberikan pengalaman yang lebih lancar dan interaktif, karena konten selalu tersedia dengan mulus seiring dengan pengguliran halaman.

Persiapan Awal

Sumber: Canva

Sebelum kita mulai mengimplementasikan Infinite Scroll, mari kita pastikan proyek React kita sudah siap.

Untuk tutorial ini, kita akan menggunakan React sebagai framework utama, dengan bantuan react-infinite-scroll-component untuk mempermudah implementasi Infinite Scroll.

Stack yang Digunakan:

React: Framework JavaScript untuk membangun antarmuka pengguna (UI).
react-infinite-scroll-component: Library untuk menambahkan fitur Infinite Scroll dengan mudah di React.

1. Membuat Proyek React Baru

Jika kamu belum memiliki proyek React, kamu bisa memulai dengan Create React App. Cukup jalankan perintah berikut di terminal:

npx create-react-app infinite-scroll-example

cd infinite-scroll-example

2. Menginstal react-infinite-scroll-component

Selanjutnya, kita perlu menginstal library react-infinite-scroll-component, yang akan membantu kita untuk menambahkan Infinite Scroll ke dalam aplikasi. Jalankan perintah berikut untuk menginstalnya:

npm install react-infinite-scroll-component

Dengan dua langkah tersebut, proyek React kamu sudah siap untuk mulai mengimplementasikan Infinite Scroll.

Setelah persiapan ini, kita akan melanjutkan ke langkah berikutnya yaitu implementasi Infinite Scroll pada aplikasi kamu.

Langkah-langkah Membuat Infinite Scroll di React

Sumber: Canva

Setelah persiapan awal selesai, sekarang kita akan mulai mengimplementasikan Infinite Scroll di aplikasi React kamu.

Langkah-langkah ini akan memandu kamu melalui proses secara bertahap, dari menyiapkan komponen hingga menambahkan logika untuk memuat data secara otomatis saat pengguna menggulir halaman ke bawah.

1. Membuat Komponen Infinite Scroll

Langkah pertama adalah membuat komponen tempat kita akan menampilkan daftar data yang dapat digulir.

Di dalam komponen ini, kita akan menggunakan react-infinite-scroll-component untuk menangani proses scroll secara otomatis.

Langkah-langkah:

Buat file baru, misalnya InfiniteScroll.js, di dalam folder src proyek React kamu.
Import InfiniteScroll dari library yang telah kita instal, serta beberapa hook dari React untuk menangani state.

// src/InfiniteScroll.js

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

import InfiniteScroll from 'react-infinite-scroll-component';

const InfiniteScrollExample = () => {

// State untuk menyimpan data dan status loading

const [items, setItems] = useState([]);

const [hasMore, setHasMore] = useState(true);

// Fungsi untuk memuat data

const fetchData = () => {

// Misalnya, data bisa datang dari API atau data lokal

const newItems = [];

for (let i = 0; i < 20; i++) {

newItems.push(`Item #${items.length + i + 1}`);

}

setItems([...items, ...newItems]);

// Jika sudah mencapai jumlah tertentu, hentikan pemuatan lebih lanjut

if (items.length >= 100) {

setHasMore(false);

}

};

// Panggil fetchData saat komponen pertama kali dimuat

useEffect(() => {

fetchData();

}, []);

return (

<div>

<h1>Infinite Scroll di React</h1>

<InfiniteScroll

dataLength={items.length} // Panjang data yang sudah dimuat

next={fetchData} // Fungsi untuk memuat data lebih lanjut

hasMore={hasMore} // Status apakah masih ada data yang bisa dimuat

loader={<h4>Loading...</h4>} // Komponen loading yang tampil saat data sedang dimuat

<ul>

{items.map((item, index) => (

))}

</ul>

</InfiniteScroll>

</div>

);

};

export default InfiniteScrollExample;

Penjelasan:

State:
items: Menyimpan daftar item yang akan ditampilkan.
hasMore: Menandakan apakah masih ada data yang perlu dimuat.

fetchData: Fungsi ini memuat data secara bertahap dan menambahkannya ke state items. Di sini, kita menggunakan data dummy, namun kamu bisa menggantinya dengan data dari API atau sumber lainnya.

InfiniteScroll: Komponen ini mengatur pengguliran dan pemuatan data secara otomatis. Properti yang perlu diperhatikan:
dataLength: Jumlah total item yang sudah dimuat.
next: Fungsi yang dipanggil untuk memuat data berikutnya.
hasMore: Menandakan apakah ada lebih banyak data untuk dimuat.
loader: Menampilkan indikator loading saat data sedang dimuat.

2. Menambahkan Logika untuk Pemuatan Data

Pada langkah ini, kita akan memastikan bahwa data dapat terus dimuat saat pengguna menggulir ke bawah.

Logika pemuatan data sudah diatur melalui fungsi fetchData yang kita gunakan di dalam InfiniteScroll. Ketika pengguna mencapai bagian bawah halaman, fungsi ini akan dipanggil untuk memuat data berikutnya.

3. Menambahkan Styling dan Pengujian

Agar tampilan aplikasi lebih menarik, kita bisa menambahkan sedikit styling untuk memastikan Infinite Scroll berjalan dengan lancar dan terlihat rapi. Kamu bisa menggunakan CSS sederhana untuk mempercantik tampilan.

Misalnya, tambahkan beberapa gaya di file App.css:

/* src/App.css */

ul {

padding: 0;

list-style-type: none;

}

li {

padding: 10px;

border: 1px solid #ddd;

margin: 5px 0;

background-color: #f9f9f9;

}

Penjelasan:

ul: Menghapus padding dan style default list.
li: Menambahkan padding dan border untuk tiap item agar tampil lebih rapi.

4. Testing Infinite Scroll

Setelah implementasi selesai, saatnya menguji Infinite Scroll di aplikasi kamu. Jalankan aplikasi dengan perintah berikut di terminal:

npm start

Setelah aplikasi berjalan, coba gulir ke bawah halaman dan lihat apakah lebih banyak item muncul. Jika sudah, kamu berhasil mengimplementasikan Infinite Scroll di React!

5. Mengoptimalkan Kinerja

Salah satu hal yang perlu diperhatikan adalah kinerja. Semakin banyak data yang dimuat, semakin berat aplikasi kamu, terutama jika data diambil dari API.

Beberapa tips untuk mengoptimalkan kinerja:

Gunakan teknik lazy loading untuk memuat gambar atau media besar secara efisien.
Batasi jumlah data yang dimuat dalam satu kali scroll untuk menjaga aplikasi tetap responsif.
Gunakan memoization untuk mencegah perhitungan ulang yang tidak perlu.

Ingin Jadi Web Developer Profesional?

Setelah mempelajari cara implementasi Infinite Scroll di React, kini saatnya kamu mengasah keterampilan pengembangan web lebih lanjut!

Yuk, ikuti Bootcamp Web Development di dibimbing.id! Di sini, kamu akan mempelajari berbagai teknik dan framework modern, termasuk React, JavaScript, dan pengembangan front-end lainnya yang penting untuk karier web developer.

Belajar langsung dari mentor berpengalaman dengan kurikulum yang aplikatif dan fokus pada keterampilan yang dibutuhkan industri.

Dengan lebih dari 840+ hiring partner dan tingkat keberhasilan alumni 96%, peluang kariermu di dunia teknologi semakin terbuka lebar!

Jadi, tunggu apa lagi? Hubungi kami dan Daftar sekarang disini, mulai perjalananmu menjadi Web Developer profesional. #BimbingSampeJadi!

Referensi

React Introduction [Buka]

Training