Svelte Lifecycle Onmount Ondestroy Tick Beforeupdate Afterupdate

Definisi

Svelte menyediakan hook siklus hidup komponen: onMount (setelah DOM masuk), onDestroy (saat komponen dibuang), beforeUpdate/afterUpdate (sebelum/sesudah DOM di-patch), dan tick (tunggu hingga DOM selesai update).

Kapan dipakai

• onMount: fetch data, init library DOM (chart, map), pasang listener global.
• onDestroy: bersihkan interval, event listener, subscription.
• tick: tunggu render selesai sebelum baca ukuran DOM.
• before/afterUpdate: sinkronisasi dengan DOM eksternal (jarang perlu).

Cara kerja

onMount & onDestroy

svelte

<script>
  import { onMount, onDestroy } from 'svelte';
  let timer;
  onMount(() => {
    timer = setInterval(() => console.log('tick'), 1000);
  });
  onDestroy(() => clearInterval(timer));
</script>

onMount bisa return fungsi cleanup (pengganti onDestroy).

tick

svelte

<script>
  import { tick } from 'svelte';
  let show = false, el;
  async function toggle() {
    show = true;
    await tick();      // DOM sudah update
    el.focus();
  }
</script>
 
{#if show}
  <input bind:this={el} />
{/if}

Struktur alur

Catatan implementasi

• onMount hanya jalan di browser, bukan saat SSR (gunaakan browser guard bila perlu).
• Return di onMount = cleanup otomatis saat destroy.
• tick() return promise; berguna saat butuh akses DOM pasca perubahan state.
• Hindari logic berat di beforeUpdate; bisa jalan berkali-kali.

Kesalahan umum

• Lupa cleanup di onDestroy: listener/interval menumpuk tiap mount.
• Akses DOM sebelum tick: bind:this masih null setelah show=true tanpa await tick().
• Logika di beforeUpdate mutasi state: memicu update lagi (loop).
• onMount async tanpa guard SSR: error saat render server.

Referensi terkait

• Svelte Reactivity: $, reactive statements, derived state
• Svelte Stores: writable, readable, derived, custom
• React Lifecycle & Hooks: useEffect cleanup