SVElte5 Runes State Derived

Ringkasan

Svelte 5 memperkenalkan runes — primitives eksplisit untuk reaktivitas. $state menggantikan let reaktif, $derived menggantikan $:.

Konsep Dasar

• let count = $state(0) — nilai reaktif.
• $derived(expr) — nilai turunan (computed), auto-track dependency.
• $derived.by(() => {...}) untuk logika multi-baris.
• Deep reactivity otomatis pada object/array.

Cara Kerja / Struktur

svelte

<script>
  let count = $state(0);
  let double = $derived(count * 2);
</script>
<button onclick={() => count++}>{count} / {double}</button>

Catatan Implementasi

• Runes hanya valid di .svelte dan .svelte.js/.ts — tidak di script biasa.
• $state di class jadi field reaktif (#state juga ada untuk private).

Kesalahan Umum

• Masih pakai $: di Svelte 5 (bisa, tapi runes lebih eksplisit & disarankan).
• Mengubah $derived secara langsung (derived read-only).

Glosarium

• Runes: primitives reaktivitas eksplisit Svelte 5.
• Deep reactivity: nested object ikut reaktif.

Referensi

• Svelte Reactivity: $, Reactive Statements