Efek vs Render, Dependensi & Pembersihan
Perbedaan antara render dan efek; array dependensi ([] , [x]) serta cara menulis fungsi pembersihan.
Efek vs Render, Dependensi & Pembersihan adalah pelajaran React Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 3. 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 React Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus React Academy mencakup 3 pelajaran total.
Perenderan vs efek
Tujuan: Pahami apa yang berjalan selama perenderan (murni, tanpa efek samping) dan apa yang termasuk dalam efek (menyinkronkan dengan dunia luar).
- Perenderan: kembalikan UI
- Efek: berjalan setelah tampilan digambar
- Pembersihan: batalkan pekerjaan
Aturan dependensi
Dependensi mengontrol kapan efek berjalan:
- []: berjalan sekali setelah pemasangan
- [x]: berjalan saat pemasangan dan setiap kali x berubah
- Jangan sertakan dependensi: berjalan setelah setiap perenderan (hindari jika masih pemula)
Demo: dependensi beraksi
Efek dengan [count] memperbarui judul setiap kali nilai penghitung berubah. Bandingkan dengan [] yang hanya berjalan sekali.
<div id="root"></div>
Mengapa pembersihan penting
Tambahkan pembersihan dengan mengembalikan sebuah fungsi dari efek. React menjalankannya sebelum menjalankan ulang efek dan saat komponen dilepas.
- Hapus pendengar
- Hapus pewaktu
- Batalkan permintaan
Demo: pembersihan efek
Kami memasang pendengar resize dalam efek dan menghapusnya dalam pembersihan untuk menghindari kebocoran.
<div id="root"></div>
Jebakan yang harus dihindari
Jebakan:
- Melakukan efek samping selama perenderan—pindahkan ke useEffect.
- Dependensi yang tidak dicantumkan menyebabkan nilai usang.
- Melupakan pembersihan untuk pendengar/pewaktu.
Pemeriksaan penempatan pembersihan
Ringkasan
Ringkasan: Lakukan perenderan secara murni; efek berjalan setelah tampilan digambar. Gunakan larik dependensi untuk mengontrol kapan efek berjalan, dan kembalikan pembersihan untuk berhenti berlangganan atau menghapus pewaktu.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Efek vs Render, Dependensi & Pembersihan” gratis?
Ya — teks lengkap “Efek vs Render, Dependensi & Pembersihan” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus React Academy, upgrade ke CoddyKit PRO. Kursus React Academy mencakup 3 pelajaran total.
Apa yang akan aku pelajari di “Efek vs Render, Dependensi & Pembersihan”?
Perbedaan antara render dan efek; array dependensi ([] , [x]) serta cara menulis fungsi pembersihan. Kamu berlatih React 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 React Academy?
Tidak diperlukan pengalaman sebelumnya. React 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 3.
Berapa lama pelajaran “Efek vs Render, Dependensi & 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 React Academy ini?
Ya. Setiap pelajaran React 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
- Efek vs Render, Dependensi & Pembersihan
- Jebakan Umum: Closure Kedaluwarsa & Dependensi yang Hilang
- Dasar Pengambilan Data dalam Efek (Pembatalan & Pembersihan)