Angular Academy · Pelajaran

Pembersihan Effect dan Siklus Hidup

Bersihkan sumber daya di dalam effect.

Pembersihan Effect dan Siklus Hidup adalah pelajaran Angular Academy gratis di CoddyKit. Ini adalah pelajaran 3 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 Angular Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Angular Academy mencakup 4 pelajaran total.

Mengapa Pembersihan Penting

Sebuah effect dapat memulai sumber daya: pewaktu, subscription, dan pemantau peristiwa. Setiap kali effect berjalan kembali, sumber daya lama harus dihentikan terlebih dahulu — jika tidak, pewaktu dan pemantau akan bocor. Angular menyediakan hook onCleanup untuk hal ini.

Callback onCleanup

Fungsi effect menerima fungsi onCleanup. Daftarkan callback penghentian dengan fungsi tersebut; Angular memanggilnya sebelum eksekusi berikutnya dan saat penghancuran.

import { effect } from '@angular/core';

effect((onCleanup) => {
  const id = setInterval(() => console.log('tick'), 1000);
  onCleanup(() => clearInterval(id));
});

Pembersihan Berjalan Sebelum Eksekusi Ulang

Ketika dependensi berubah, Angular terlebih dahulu memanggil pembersihan yang terdaftar, lalu menjalankan kembali isi effect. Hal ini menjamin hanya ada satu sumber daya aktif pada satu waktu.

const delay = signal(1000);

effect((onCleanup) => {
  const id = setInterval(() => console.log('tick'), delay());
  onCleanup(() => clearInterval(id)); // clears old interval first
});

delay.set(500); // old interval cleared, new one started

Pembersihan Pemantau Peristiwa

Pemantau DOM yang ditambahkan di dalam effect harus dihapus saat pembersihan untuk menghindari handler duplikat dan kebocoran.

effect((onCleanup) => {
  const handler = () => console.log(window.innerWidth);
  window.addEventListener('resize', handler);
  onCleanup(() => window.removeEventListener('resize', handler));
});

Pembersihan Subscription

Jika effect melakukan subscription ke Observable, batalkan subscription tersebut saat pembersihan. (Sering kali Anda akan menggunakan alat lain, tetapi contoh ini menunjukkan polanya.)

effect((onCleanup) => {
  const sub = interval$.subscribe(v => console.log(v));
  onCleanup(() => sub.unsubscribe());
});

Pembersihan saat Penghancuran

Ketika komponen pemilik effect dihancurkan, Angular otomatis menjalankan pembersihan terakhir, lalu menghancurkan effect tersebut. Tidak ada pewaktu yang bocor.

Urutan: pembersihan lalu isi

Pada eksekusi pertama effect, tidak ada yang perlu dibersihkan. Mulai eksekusi kedua dan seterusnya, urutannya selalu: pembersihan -> isi.

let runs = 0;
effect((onCleanup) => {
  runs++;
  console.log('run', runs, dep());
  onCleanup(() => console.log('cleanup before run', runs + 1));
});

Hindari Pekerjaan Berat tanpa Pembersihan

Setiap sumber daya berumur panjang yang dimulai dalam effect harus memiliki pembersihan yang sesuai. Bug yang umum adalah lupa melakukan pembersihan sehingga interval terus menumpuk setiap kali dependensi berubah.

Opsi manualCleanup

Untuk effect yang dibuat di luar komponen (misalnya di layanan root yang hidup selamanya), Anda dapat menggunakan opsi manualCleanup, lalu memanggil ref.destroy() sendiri pada waktu yang tepat.

const ref = effect(() => {
  console.log(value());
}, { manualCleanup: true });

// You are now responsible for:
// ref.destroy();

DestroyRef sebagai Alternatif

Untuk penghentian selain effect, Anda dapat menginjeksi DestroyRef dan mendaftarkan callback dengan onDestroy. Di dalam effect, gunakan onCleanup untuk penghentian per eksekusi.

import { inject, DestroyRef } from '@angular/core';

const destroyRef = inject(DestroyRef);
destroyRef.onDestroy(() => console.log('component destroyed'));

Menyatukan Semuanya

Effect sinkronisasi dengan debounce: setiap perubahan nilai membatalkan pewaktu sebelumnya dan menjadwalkan penyimpanan baru.

const query = signal('');

effect((onCleanup) => {
  const q = query();
  const id = setTimeout(() => save(q), 300);
  onCleanup(() => clearTimeout(id));
});

Pemeriksaan Singkat

Uji pemahaman Anda tentang pembersihan effect.

Ringkasan: Pembersihan & Siklus Hidup Effect

Gunakan parameter onCleanup untuk menghentikan sumber daya yang dimulai di dalam effect.

Pembersihan berjalan sebelum setiap eksekusi ulang dan saat penghancuran.
Selalu bersihkan pewaktu, pemantau, dan subscription.
manualCleanup untuk effect berumur panjang; DestroyRef untuk penghentian umum.

Berikutnya: linkedSignal dan pola lanjutan.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Pembersihan Effect dan Siklus Hidup” gratis?

Ya — teks lengkap “Pembersihan Effect dan Siklus Hidup” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Angular Academy, upgrade ke CoddyKit PRO. Kursus Angular Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Pembersihan Effect dan Siklus Hidup”?

Bersihkan sumber daya di dalam effect. Kamu berlatih Angular 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 Angular Academy?

Tidak diperlukan pengalaman sebelumnya. Angular 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 3 dari 4.

Berapa lama pelajaran “Pembersihan Effect dan Siklus Hidup” 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 Angular Academy ini?

Ya. Setiap pelajaran Angular 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

← Kembali ke Angular Academy