ReactJS - Custom Hooks: Mastering Infinite Scroll

Halo, para pengembang React yang bersemangat! Hari ini, kita akan memulai perjalanan yang menarik ke dunia hook pribadi, khususnya fokus pada implementasi fungsi infinite scroll. Sebagai guru ilmu komputer yang ramah di lingkungan Anda, saya akan memandu Anda melalui proses ini langkah demi langkah, memastikan Anda mengerti setiap konsep sepanjang jalan. Jadi, ambil minumannya yang favorit, rias diri Anda, dan mari kita masuk ke dalam!

Mengenal Custom Hooks

Sebelum kita membanjiri infinite scroll, mari kitaambil sedikit waktu untuk memahami apa itu custom hooks. Di dalam React, hooks adalah fungsi yang memungkinkan Anda "menempel" ke fitur state dan lifecycle dari komponen function. Custom hooks adalah fungsi yang menggunakan hooks lain dan dapat dipakai bersama antar komponen.

Pertimbangkan custom hooks sebagai pisau multifungsi priband Anda untuk pengembangan React. Mereka membantu Anda mengextract logika komponen ke fungsi yang dapat dipakai kembali, membuat kode Anda lebih bersih dan modular.

Implementing Infinite Scroll Functionality

Sekarang, mari kita tangani bintang pertunjukan kita: infinite scroll. Anda mungkin telah menemukan fitur ini di platform media sosial atau situs berita di mana konten terus dimuat saat Anda gulir ke bawah. Ini adalah cara bagus untuk meningkatkan pengalaman pengguna dengan menyajikan konten lebih banyak secara mulus tanpa perlu halaman navigasi.

Dasar Infinite Scroll

Pada intinya, infinite scroll melibatkan tiga langkah utama:

1. Mendeteksi saat pengguna telah gulir ke dasar halaman
2. Memicu permintaan untuk memuat data lebih banyak
3. Menambahkan data baru ke konten yang sudah ada

mari kita pecah ini menjadi bagian yang dapat dikelola dan buat hook pribad kita.

Implementing useInfiniteScroll Hook

Kita akan membuat hook pribadi yang dinamai useInfiniteScroll. Hook ini akan mengelola logika untuk mendeteksi kapan memuat konten lebih banyak dan menyediakan kita dengan state dan fungsi yang diperlukan untuk implementasi gulir tak terbatas di komponen kita.

Berikut adalah struktur dasar hook kita:

import { useState, useEffect } from 'react';

const useInfiniteScroll = (callback) => {
const [isFetching, setIsFetching] = useState(false);

useEffect(() => {
window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll);
}, []);

useEffect(() => {
if (!isFetching) return;
callback();
}, [isFetching]);

function handleScroll() {
if (window.innerHeight + document.documentElement.scrollTop !== document.documentElement.offsetHeight || isFetching) return;
setIsFetching(true);
}

return [isFetching, setIsFetching];
};

export default useInfiniteScroll;

Beriakdown ini piece by piece:

1. Kita import useState dan useEffect dari React. Ini adalah blok pembangun hook pribad kita.

2. Hook useInfiniteScroll kita menerima fungsi callback sebagai argumen. Ini akan menjadi fungsi yang memuat data lebih banyak saat dipicu.

3. Kita buat variabel state isFetching menggunakan useState. Ini akan melacak apakah kita sedang memuat data lebih banyak.

4. Pertama useEffect menambahkan event listener gulir saat komponen dimuat dan menghapusnya saat komponen dihapus. Ini adalah pembersihan kita untuk mencegah kebocoran memori.

5. Kedua useEffect memantau perubahan dalam isFetching. Saat itu menjadi true, ia memanggil fungsi callback kita untuk memuat data lebih banyak.

6. Fungsi handleScroll adalah tempat dimana magik terjadi. Itu memeriksa apakah kita telah gulir ke dasar halaman dan apakah kita sedang memuat data. Jika kedua kondisi terpenuhi, ia menetapkan isFetching ke true.

7. Akhirnya, kita mengembalikan isFetching dan setIsFetching sehingga komponen yang menggunakan hook ini dapat mengakses dan memperbarui state ini.

Sekarang, mari kita lihat bagaimana kita dapat menggunakan hook ini di dalam komponen:

import React, { useState } from 'react';
import useInfiniteScroll from './useInfiniteScroll';

const InfiniteScrollComponent = () => {
const [items, setItems] = useState([]);
const [isFetching, setIsFetching] = useInfiniteScroll(fetchMoreListItems);

function fetchMoreListItems() {
// Simulasi panggilan API
setTimeout(() => {
setItems(prevItems => ([...prevItems, ...Array(20).fill(0).map((_, i) => ({ id: prevItems.length + i, name: `Item ${prevItems.length + i + 1}` }))]));
setIsFetching(false);
}, 2000);
}

return (
<div>
<ul>
{items.map(item => <li key={item.id}>{item.name}</li>)}
</ul>
{isFetching && 'Fetching more list items...'}
</div>
);
};

export default InfiniteScrollComponent;

Dalam komponen ini:

1. Kita gunakan hook useInfiniteScroll kita, memberikannya fungsi fetchMoreListItems.
2. fetchMoreListItems mensimulasikan panggilan API, menambahkan 20 item baru ke daftar kita setelah jeda 2 detik.
3. Kita merender item daftar kita dan menampilkan pesan loading saat isFetching benar.

Dan itu adalah! Implementasi gulir tak terbatas yang sepenuhnya berfungsi menggunakan hook React pribadi.

Ingat, keindahan hook pribadi adalah reusabilitasnya. Sekarang Anda dapat menggunakan hook useInfiniteScroll ini di setiap komponen yang memerlukan fungsi gulir tak terbatas.

Kesimpulan

Custom hooks adalah fitur yang kuat di React yang memungkinkan kita untuk membuat logika yang dapat dipakai kembali. Dengan implementasi gulir tak terbatas sebagai hook pribadi, kita telah menciptakan solusi yang fleksibel dan dapat dipakai kembali yang dapat dengan mudah diintegrasikan ke berbagai komponen.

Sekarang, teruskan perjalanannya Anda di React dan terus mengeksplorasi dan membuat custom hooks. Mereka adalah cara yang bagus untuk menjaga agar kode Anda tetap Kering (Don't Repeat Yourself) dan menjaga kode Anda bersih dan modular.

Selamat coding, dan semoga gulir Anda tak terbatas! ??

Credits: Image by storyset