Svelte Reactivity Dollar Reactive Statements Derived

Definisi

Reactivity Svelte berpusat pada assignment dan reactive statements ($:). Apapun yang bergantung pada nilai berubah akan otomatis diperbarui saat compile-time, tanpa API khusus.

Kapan dipakai

• Hitung nilai turunan (total harga, filter list) dari state.
• Jalankan efek samping saat variabel berubah.
• Singkatkan ekspresi berulang di template.

Cara kerja

Reactive statement

svelte

<script>
  let harga = 1000;
  let qty = 2;
  $: total = harga * qty;        // total update saat harga/qty berubah
  $: console.log('total:', total); // efek samping saat total berubah
</script>
 
<p>Total: {total}</p>

Reactive block

svelte

$: if (qty > 10) {
  diskon = 0.1;
} else {
  diskon = 0;
}

Reactive vs store

svelte

$: doubled = $count * 2; // gabungkan store ($count) ke reactive local

Struktur alur

Catatan implementasi

• $: menandai baris sebagai reactive; bisa berupa ekspresi maupun block if.
• Dependency ditentukan dari variabel yang dibaca di statement tersebut.
• Untuk state lintas komponen, gabungkan dengan store ($store), bukan reactive lokal.
• Reactive statement berjalan setelah nilai berubah, bukan saat deklarasi pertama (kecuali memang dependensinya sudah ada).

Kesalahan umum

• Mutasi tanpa re-assign: list.push(x) tidak trigger; pakai list = [...list, x].
• Dependency siklik: $: a = b; $: b = a membuat loop compile/loop runtime.
• Ngira $: itu async: reactive statement sinkron setelah update, bukan microtask.
• Reactive statement baca store tanpa $: lupa $count, jadi nilai statis.

Referensi terkait

• Svelte Memulai: Instalasi, Struktur, Reactivity Dasar
• Svelte Stores: writable, readable, derived, custom
• React Rendering Performance: memo, useMemo, key stability