Mengenal useEffect di React JS
1. Latar Belakang
Sebelum tahun 2018, pengembang React JS sangat bergantung pada "Class Components" untuk mengelola status (state) dan siklus hidup (lifecycle) sebuah komponen. Mereka menggunakan metode rumit seperti componentDidMount, componentDidUpdate, dan componentWillUnmount untuk mengatur apa yang terjadi saat komponen pertama kali dimuat, saat ada perubahan data, dan saat komponen dihancurkan. Pendekatan ini seringkali membuat kode menjadi panjang, sulit dibaca, dan membingungkan ketika aplikasi semakin besar.
Namun, sejak React versi 16.8, diperkenalkanlah fitur revolusioner bernama "Hooks". Hooks memungkinkan pengembang menggunakan fungsionalitas penuh React hanya dengan "Functional Components" yang jauh lebih sederhana. Salah satu Hook yang paling penting dan paling sering digunakan adalah useEffect. Hook ini diciptakan khusus untuk menangani "Efek Samping" (Side Effects) di dalam aplikasi, menggantikan semua fungsi siklus hidup kelas tradisional menjadi satu fungsi yang elegan dan efisien.
2. Alat dan Bahan
a. Perangkat Lunak
- Terminal / Command Prompt
- Text Editor (VS Code)
- Web Browser (Firefox)
- Node js (untuk runtime JS)
b. Perangkat Keras
- Laptop / Komputer.
3. Pembahasan
3.1 Apa itu Side Effect dan useEffect?
Dalam ilmu komputer, "Side Effect" (Efek Samping) adalah operasi apapun yang memengaruhi sesuatu di luar cakupan fungsi yang sedang berjalan. Dalam konteks React, tugas utama sebuah komponen hanyalah menerima data dan mengembalikan antarmuka (UI). Jika komponen tersebut melakukan hal lain di luar tugas utama itu, seperti mengambil data dari server internet (API), mengubah judul tab peramban secara manual, atau menjalankan timer berjalan, maka itu disebut Side Effect.
useEffect adalah fungsi bawaan React yang memberitahu komponen bahwa komponen tersebut harus melakukan sesuatu setelah proses render (pemuatan antarmuka) selesai di layar.
3.2 Kapan Digunakan? (Use Cases)
Penggunaan useEffect sangat mutlak diperlukan dalam skenario berikut:
1. Mengambil Data (Data Fetching): Meminta data produk atau profil pengguna dari server (API) saat halaman pertama kali dibuka.
2. Memanipulasi DOM secara Langsung: Mengubah judul halaman (document.title) menyesuaikan dengan halaman yang sedang dibuka.
3. Langganan dan Timer (Subscriptions & Timers): Menjalankan jam digital yang berdetik setiap detik menggunakan setInterval, atau mendengarkan pergerakan kursor mouse.
3.3 Cara Penggunaan dan Aturan Dependency Array
Struktur dasar dari useEffect menerima dua argumen: sebuah fungsi yang berisi logika efek samping, dan sebuah array (daftar) dependensi opsional. Array dependensi inilah yang mengendalikan kapan efek tersebut dijalankan.
A. Tanpa Dependency Array (Berjalan Setiap Render)
Jika Anda tidak memberikan array sama sekali, efek akan dijalankan setiap kali komponen dirender ulang (setiap ada perubahan data apapun di komponen tersebut). Ini jarang digunakan karena dapat membebani kinerja aplikasi.
import { useEffect } from 'react';
function KomponenSaya() {
useEffect(() => {
console.log("Saya berjalan setiap kali komponen di-render ulang!");
});
return <div>Halo Dunia</div>;
}
B. Array Kosong [] (Berjalan Hanya Sekali)
Jika Anda memberikan array kosong, efek hanya akan dijalankan satu kali saja, yaitu saat komponen pertama kali muncul di layar (Mounting). Ini adalah tempat yang tepat untuk mengambil data dari API di awal.
function ProfilPengguna() {
useEffect(() => {
console.log("Mengambil data dari server hanya sekali saat halaman dimuat...");
// Logika fetch API diletakkan di sini
}, []); // <-- Array kosong
return <div>Memuat data profil...</div>;
}
C. Array Berisi Variabel (Berjalan Saat Variabel Berubah)
Jika Anda memasukkan variabel (state atau props) ke dalam array, efek hanya akan berjalan jika nilai variabel tersebut berubah.
function Penghitung() {
const [angka, setAngka] = useState(0);
useEffect(() => {
// Judul tab browser akan berubah sesuai angka
document.title = `Anda klik ${angka} kali`;
}, [angka]); // <-- Efek hanya jalan kalau 'angka' berubah
return (
<button onClick={() => setAngka(angka + 1)}>
Tambah Angka
</button>
);
}
D. Fungsi Pembersihan (Cleanup Function)
Beberapa efek samping seperti timer atau koneksi chat perlu "dibersihkan" saat pengguna pindah halaman agar tidak menyebabkan kebocoran memori (memory leak). Ini dilakukan dengan mengembalikan sebuah fungsi di dalam useEffect.
function TimerJam() {
useEffect(() => {
const timer = setInterval(() => {
console.log("Detik bertambah...");
}, 1000);
// Fungsi cleanup untuk menghentikan timer saat komponen hilang
return () => clearInterval(timer);
}, []);
return <div>Jam sedang berjalan di background</div>;
}
3.4 Praktik Terbaik
- Waspada Infinite Loop: Jangan pernah mengubah sebuah state di dalam useEffect yang tidak memiliki array dependensi, atau yang dependensinya adalah state itu sendiri. Ini akan membuat aplikasi terperangkap dalam siklus render tanpa henti dan membuat peramban macet.
- Pisahkan Logika yang Berbeda: Jika komponen Anda memiliki dua efek samping yang tidak saling berhubungan (misal: satu untuk fetch API, satu lagi untuk timer), buatlah dua buah useEffect yang terpisah agar kode lebih rapi.
- Jangan Lupa Cleanup: Selalu bersihkan efek samping yang berjalan terus-menerus (seperti event listener manual atau setInterval) menggunakan return function untuk menjaga kesehatan memori aplikasi.
3.5 Kesimpulan
Hook useEffect adalah kunci utama untuk membuat aplikasi React JS dapat berinteraksi dengan dunia luar. Hook ini memisahkan logika antarmuka murni dari operasi-operasi berat atau berkelanjutan seperti pengambilan data server dan modifikasi DOM. Dengan memahami cara kerja array dependensi—baik itu tanpa array, array kosong, maupun array dengan variabel spesifik—pengembang memegang kendali penuh atas kapan sebuah fungsi harus dijalankan. Ditambah dengan pemahaman tentang fungsi pembersihan (cleanup), pengembang dapat memastikan aplikasi berjalan dengan cepat, efisien, dan bebas dari masalah kebocoran memori.
4. Daftar Pustaka
React Documentation. (2024). Synchronizing with Effects.
Petani Kode. (2020). Belajar React JS: Menggunakan React Hooks.
Dicoding Indonesia. (2023). Belajar Membuat Aplikasi Web dengan React.
FreeCodeCamp. (2022). A Complete Guide to the useEffect Hook.
0 Komentar