ReactJS - Menggunakan useEffect: Panduan Komprehensif untuk Pemula

Hai teman-teman, para ahli React masa depan! Hari ini, kita akan melangkah ke dalam dunia useEffect di React. Jangan khawatir jika Anda baru dalam programming - saya akan menjadi panduan ramah Anda, dan kita akan mengambil ini langkah demi langkah. Pada akhir panduan ini, Anda akan bisa menggunakannya useEffect seperti seorang ahli!

Apa itu useEffect?

Sebelum kita mendalam, mari kita mengerti apa saja useEffect ini. Bayangkan Anda sedang memasak kue. Anda mencampur bahan, memasukkannya ke dalam oven, dan kemudian... apa? Anda mungkin ingin menyetel timer, kan? Itu seperti halnya useEffect dalam React. Itu memungkinkan Anda melakukan "efek samping" dalam 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 detilnya!

Tanda Tangan useEffect

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

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

Berikut arti setiap bagian:

1. useEffect: Nama hook yang kita gunakan.
2. () => { ... }: Ini adalah fungsi panah tempat kita menaruh kode effect.
3. [dependencies]: Ini adalah array opsional tempat kita daftarkan nilai yang effect kita 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 effect ini hanya akan dijalankan sekali saat komponen di mounting.

Fitur Hook Effect

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

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

Mari lihat setiap dari ini secara detil.

Waktu

Secara default, useEffect dijalankan setelah setiap render. Ini berarti jika Anda mengubah state dalam effect, itu bisa menyebabkan loop tak terbatas! Berikut contoh apa yang TIDAK harus dilakukan:

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

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

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

Eksekusi Kondisional

Untuk mencegah effects 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, effect hanya akan dijalankan saat userId berubah.

Pembersihan

Beberapa effects perlu dibersihkan untuk mencegah kebocoran memori. Berikut cara kita dapat melakukan itu:

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

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

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

Fungsi yang dikembalikan dari effect akan dipanggil saat komponen di unmount.

Mengambil Data Menggunakan Effect

Salah satu penggunaan umum useEffect adalah mengambil data dari API. Mari 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 dimount, menangani state loading dan error, dan menampilkan data saat siap.

Mutasi DOM

useEffect juga dapat digunakan untuk memanipulasi DOM secara langsung. Berikut 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>;
}

Effect ini mengubah warna elemen menjadi merah saat komponen dimount, dan mengembalikannya saat komponen di unmount.

Fungsi Pembersihan

Kita telah menyentuh fungsi pembersihan, tapi mari kita masuk lebih mendalam. Fungsi pembersihan sangat penting untuk mencegah kebocoran memori dan perilaku yang tidak diperlukan. Berikut 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 event listener saat komponen dimount, dan menghapusnya saat komponen di unmount. 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 Kondisional	Gunakan array dependensi untuk mengendalikan kapan effect dijalankan
Pembersihan	Kembalikan fungsi dari effect 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 saja! Anda telah mengambil langkah pertama ke dalam dunia useEffect. Ingat, seperti segala 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