ReactJS - Menggunakan useEffect: Panduan Komprehensif untuk Pemula

Hai teman-teman, para ahli React masa depan! Hari ini, kita akan memulai perjalanan menarik ke dunia useEffect di React. Jangan khawatir jika Anda baru dalam programming - saya akan menjadi panduan ramah Anda, dan kita akan mengambil langkah ini secara bertahap. Pada akhir panduan ini, Anda akan bisa menggunakan useEffect seperti seorang pro!

Apa itu useEffect?

Sebelum kita masuk ke detil, mari kita mengerti apa saja useEffect ini. Bayangkan Anda sedang membuat kue. Andacampur bahan, masukkan ke dalam oven, dan kemudian... apa? Anda mungkin ingin menyetel timer, kan? Itu seperti apa yang useEffect lakukan di React. Itu memungkinkan Anda melakukan "efek samping" di komponen Anda.

Efek samping adalah tindakan yang terjadi bersamaan dengan tugas utama komponen Anda, yaitu merender UI. Ini bisa termasuk hal seperti:

• Mengambil data dari API
• Mengubah DOM secara manual
• Menyetellangganan

Sekarang, mari kita masuk ke detil!

Tanda Tangan useEffect

Hook useEffect memiliki cara tertentu yang harus ditulis. Mari kitauraikan ini:

useEffect(() => {
// Kode efek Anda di sini
}, [dependencies]);

Berikut adalah arti setiap bagian:

1. useEffect: Nama hook yang kita gunakan.
2. () => { ... }: Ini adalah fungsi panah tempat kita menaruh kode efek.
3. [dependencies]: Ini adalah array opsional tempat kita daftar nilai yang efeknya bergantung.

mari lihat contoh sederhana:

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

function Timer() {
const [seconds, setSeconds] = useState(0);

useEffect(() => {
const interval = setInterval(() => {
setSeconds(prevSeconds => prevSeconds + 1);
}, 1000);

return () => clearInterval(interval);
}, []);

return <div>Detik: {seconds}</div>;
}

Dalam contoh ini, kita membuat timer sederhana. Hook useEffect menyetel interval yang menambahkan state seconds setiap detik. Array dependensi kosong [] berarti efek ini hanya akan dijalankan sekali saat komponen dimuat.

Fitur Hook Efek

Sekarang kita sudah melihat contoh dasar, mari kita jelajahi beberapa fitur kunci hook efek:

1. Waktu: Efek secara default dijalankan setelah setiap render.
2. Eksekusi Bersyarat: Kita dapat mengendalikan kapan efek dijalankan dengan menggunakan array dependensi.
3. Pembersihan: Efek dapat mengembalikan fungsi pembersihan untuk mencegah kebocoran memori.

Mari kita lihat setiap dari ini secara detil.

Waktu

Secara default, useEffect dijalankan setelah setiap render. Ini berarti jika Anda mengubah state di dalam efek, itu bisa menyebabkan loop tak terbatas! Ini adalah contoh apa yang TIDAK disembuhkan:

function BadExample() {
const [count, setCount] = useState(0);

useEffect(() => {
setCount(count + 1); // Ini akan menyebabkan loop tak terbatas!
});

return <div>{count}</div>;
}

Eksekusi Bersyarat

Untuk mencegah efek berjalan tanpa perlu, kita dapat menyediakan array dependensi:

function ConditionalEffect({ userId }) {
const [user, setUser] = useState(null);

useEffect(() => {
fetchUser(userId).then(data => setUser(data));
}, [userId]);

return <div>{user ? user.name : 'Memuat...'}</div>;
}

Dalam contoh ini, efek hanya akan dijalankan saat userId berubah.

Pembersihan

Beberapa efek perlu dibersihkan untuk mencegah kebocoran memori. Berikut adalah cara kita dapat melakukannya:

function CleanupExample() {
useEffect(() => {
const subscription = subscribeToSomething();

return () => {
subscription.unsubscribe();
};
}, []);

return <div>Saya berlangganan!</div>;
}

Fungsi yang dikembalikan dari efek akan dipanggil saat komponen dihapus.

Mengambil Data Menggunakan Efek

Salah satu penggunaan umum useEffect adalah mengambil data dari API. Mari kita lihat contoh:

function DataFetcher() {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);

useEffect(() => {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
setData(data);
setLoading(false);
})
.catch(error => {
setError(error);
setLoading(false);
});
}, []);

if (loading) return <div>Memuat...</div>;
if (error) return <div>Error: {error.message}</div>;
return <div>Data: {JSON.stringify(data)}</div>;
}

Komponen ini mengambil data saat dimuat, menangani state memuat dan kesalahan, dan menampilkan data saat siap.

Mutasi DOM

useEffect juga dapat digunakan untuk memanipulasi DOM secara langsung. Berikut adalah contoh:

function DOMManipulator() {
useEffect(() => {
const element = document.getElementById('my-element');
element.style.color = 'red';

return () => {
element.style.color = '';
};
}, []);

return <div id="my-element">Saya merah!</div>;
}

Efek ini mengubah warna elemen menjadi merah saat komponen dimuat, dan mengembalikannya saat komponen dihapus.

Fungsi Pembersihan

Kita telah menyentuh fungsi pembersihan, tetapi mari kita masuk lebih mendalam. Fungsi pembersihan sangat penting untuk mencegah kebocoran memori dan perilaku yang tidak diperlukan. Berikut adalah contoh yang lebih kompleks:

function WindowResizer() {
const [windowWidth, setWindowWidth] = useState(window.innerWidth);

useEffect(() => {
const handleResize = () => setWindowWidth(window.innerWidth);
window.addEventListener('resize', handleResize);

return () => {
window.removeEventListener('resize', handleResize);
};
}, []);

return <div>Lebar jendela: {windowWidth}px</div>;
}

Dalam contoh ini, kita menambahkan penggunaan event listener saat komponen dimuat, dan menghapusnya saat komponen dihapus. Ini mencegah listener tetap berada setelah kita tidak memerlukannya lagi.

Ringkasan

Mari rangkum apa yang kita pelajari tentang useEffect:

Fitur	Deskripsi
Tanda Tangan	useEffect(() => { ... }, [dependencies])
Waktu	Secara default dijalankan setelah setiap render
Eksekusi Bersyarat	Gunakan array dependensi untuk mengendalikan kapan efek dijalankan
Pembersihan	Kembalikan fungsi dari efek untuk pembersihan
Mengambil Data	Dapat digunakan untuk mengambil data dari APIs
Manipulasi DOM	Dapat secara langsung memanipulasi DOM
Fungsi Pembersihan	Penting untuk mencegah kebocoran memori

Dan itu adalah! Anda sudah mengambil langkah pertama ke dunia useEffect. Ingat, seperti semua alat yang kuat, itu memerlukan latihan untuk menjadi ahli. Jadi jangan takut untuk mencoba dan membuat kesalahan - itu adalah bagian dari proses belajar. Selamat coding, dan semoga efek Anda selalu bersih dan komponen Anda selalu reaktif!

Credits: Image by storyset