Dasar useEffect: Dependensi dan Pembersihan
Jalankan efek samping setelah render, kendalikan waktu eksekusinya kembali dengan array dependensi, dan kembalikan fungsi pembersihan untuk mencegah kebocoran memori.
Dasar useEffect: Dependensi dan Pembersihan adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.
Apa Itu useEffect?
useEffect menjalankan efek samping setelah React merender. Efek samping mencakup pengambilan data, berlangganan acara, pengaturan pengatur waktu, dan interaksi dengan API eksternal. Efek berjalan setelah tampilan ditampilkan, bukan selama perenderan.
Sintaks Dasar
useEffect(effect, deps?). Fungsi efek secara bawaan berjalan setelah setiap perenderan. Berikan larik dependensi untuk mengatur kapan efek tersebut berjalan.
import { useEffect } from 'react';
function Component() {
useEffect(() => {
console.log('Ran after every render');
});
}Larik Dependensi Mengatur Kapan Efek Berjalan
Larik kosong []: jalankan sekali setelah pemasangan. Larik tidak kosong [a, b]: jalankan ketika a atau b berubah. Tanpa larik: jalankan setelah setiap perenderan (jarang menjadi yang Anda inginkan).
// Run once on mount:
useEffect(() => {
fetchInitialData();
}, []);
// Run when userId changes:
useEffect(() => {
fetchUser(userId);
}, [userId]);
// Run after every render (usually a bug):
useEffect(() => {
trackPageView();
});Fungsi Pembersihan
Kembalikan sebuah fungsi dari useEffect untuk menjalankan pembersihan: hapus pendengar acara, batalkan langganan, dan hapus pengatur waktu. Pembersihan berjalan sebelum efek berikutnya dan saat komponen dilepas.
useEffect(() => {
const handleResize = () => setWidth(window.innerWidth);
window.addEventListener('resize', handleResize);
// Cleanup: remove listener when effect re-runs or component unmounts
return () => {
window.removeEventListener('resize', handleResize);
};
}, []);Penutupan Usang dalam Dependensi
Efek menyimpan nilai yang dirujuknya pada saat efek tersebut dibuat. Jika Anda membaca nilai status atau properti di dalam efek tanpa mencantumkannya dalam dependensi, Anda akan melihat nilai yang usang. Aturan dependensi lengkap dari ESLint dapat mendeteksi hal ini.
Aturan exhaustive-deps ESLint
Aturan ESLint react-hooks/exhaustive-deps memperingatkan Anda ketika dependensi efek belum dicantumkan. Hampir selalu benar jika Anda mengikuti sarannya — dependensi yang usang menyebabkan kesalahan.
useEffect vs useLayoutEffect
useEffect berjalan setelah browser menampilkan tampilan. useLayoutEffect berjalan secara sinkron setelah perubahan DOM, sebelum tampilan ditampilkan. Gunakan useLayoutEffect untuk membaca pengukuran DOM agar kedipan visual dapat dihindari.
Beberapa Efek
Gunakan beberapa pemanggilan useEffect untuk memisahkan hal-hal yang tidak berkaitan. Setiap efek dapat memiliki larik dependensi dan logika pembersihan sendiri.
// Separate effects for separate concerns:
useEffect(() => { document.title = `${count} items`; }, [count]);
useEffect(() => {
const sub = wsClient.subscribe(onMessage);
return () => sub.unsubscribe();
}, []);Kondisi Balapan — Penanda ignore
Ketika efek mengambil data berdasarkan properti, permintaan yang lebih awal mungkin selesai setelah permintaan yang lebih baru. Gunakan penanda pembersihan untuk mengabaikan respons yang usang.
useEffect(() => {
let ignore = false;
async function load() {
const data = await fetchUser(userId);
if (!ignore) setUser(data); // only update if not cleaned up
}
load();
return () => { ignore = true; };
}, [userId]);Efek Ganda dalam Strict Mode
Strict Mode React 18 memasang, melepas, lalu memasang kembali komponen dalam pengembangan untuk menemukan kesalahan pembersihan. Efek Anda akan berjalan dua kali — ini disengaja dan membantu mendeteksi pembersihan yang tidak ada.
Kapan Tidak Menggunakan useEffect
Jangan gunakan useEffect untuk: 1) menurunkan status dari properti (hitung saat perenderan), 2) mengatur ulang status ketika properti berubah (gunakan properti key), 3) memperbarui status tanpa syarat (menyebabkan perulangan). Jika ragu, tanyakan: apakah kode ini merespons acara pengguna atau sistem eksternal?
Pemeriksaan Singkat
Kapan fungsi pembersihan useEffect berjalan?
Rangkuman: useEffect
Efek samping berjalan setelah perenderan. Larik dependensi kosong = sekali saat pemasangan. Larik dependensi = saat terjadi perubahan tertentu. Kembalikan fungsi pembersihan untuk mencegah kebocoran. Gunakan beberapa efek untuk hal-hal yang terpisah. Penanda ignore mencegah respons pengambilan data yang usang. Strict Mode menjalankan efek dua kali untuk menguji pembersihan. Jangan gunakan useEffect untuk nilai turunan atau status yang dapat Anda hitung saat perenderan.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Dasar useEffect: Dependensi dan Pembersihan” gratis?
Ya — teks lengkap “Dasar useEffect: Dependensi dan Pembersihan” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Dasar useEffect: Dependensi dan Pembersihan”?
Jalankan efek samping setelah render, kendalikan waktu eksekusinya kembali dengan array dependensi, dan kembalikan fungsi pembersihan untuk mencegah kebocoran memori. Kamu berlatih Frontend Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Frontend Academy?
Tidak diperlukan pengalaman sebelumnya. Frontend Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.
Berapa lama pelajaran “Dasar useEffect: Dependensi dan Pembersihan” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Frontend Academy ini?
Ya. Setiap pelajaran Frontend Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Dasar useEffect: Dependensi dan Pembersihan
- Mengambil Data saat Mount
- Menangani State Loading dan Error
- AbortController untuk Pembersihan