Reaktivitas Svelte — Svelte

Svelte memiliki reaktivitas berbasis assignment. Ketika kamu mengubah nilai variabel, UI otomatis terupdate. Reaktivitas Dasar let count = 0 function…

Reaktivitas artinya tampilan ikut berubah sendiri saat datanya berubah. Di Svelte 4, pemicunya adalah assignment, yaitu memberi nilai baru ke variabel dengan =, +=, atau ++. Bayangin dapur Warung Bu Sri. Kasir menulis pesanan di papan dan membunyikan bel, lalu juru masak melirik papan. Kalau kasir diam-diam menambah baris di kertas pesanan di laci tanpa membunyikan bel, kertasnya memang bertambah, tapi juru masak gak tahu. Assignment adalah menulis di papan sambil membunyikan bel. Compiler Svelte yang memasang bel itu di tiap assignment yang dia temukan di kodemu.

🧪 Tebakan cepat: keranjang berisi ["Nasi Goreng", "Es Teh", "Mie Ayam"] dan halaman menampilkan Total: {keranjang.length}. Tombol "Tambah Es Jeruk" menjalankan keranjang.push("Es Jeruk"). Setelah satu klik, tampilannya Total: 3 atau Total: 4? Jawabannya ada di bagian "push gak memicu update".

Assignment memperbarui tampilan

Variabel yang ditulis di level paling luar <script> adalah state komponen: data yang diingat komponen dan ditampilkan di markup. Begitu variabel itu diberi nilai baru, tampilannya ikut berubah:

<script>
  let count = 0
</script>

<button on:click={() => count += 1}>+1</button>
<p>Count: {count}</p>

Kejadian	`count`	Tampil
Awal	0	Count: 0
Klik +1	1	Count: 1
Klik +1 lagi	2	Count: 2

on:click={...} menjalankan function di dalamnya tiap tombol diklik. Event dibahas lengkap di pelajaran Event Handling.
count += 1 adalah assignment. count++ dan count = count + 1 sama saja.
Gak ada setCount atau fungsi khusus lain. Memberi nilai baru sudah cukup. Ini jawaban latihan pertama.

Yang dilakukan compiler

Svelte gak mengawasi variabel saat aplikasi jalan. Compiler membaca kodemu saat build, mencari assignment ke variabel state, lalu membungkusnya. Dari counter tadi, Svelte 4.2.19 menghasilkan:

function instance($self, $props, $invalidate) {
  let count = 0;
  const click_handler = () => $invalidate(0, count += 1);
  return [count, click_handler];
}

$invalidate(0, count += 1) menjalankan count += 1, lalu memberi tahu Svelte bahwa variabel nomor 0 (count) berubah. Inilah belnya.
Svelte lalu menjalankan kode update yang kamu lihat di pelajaran Apa itu Svelte, dan mengganti text node angkanya.
Yang dibungkus cuma assignment. Kode yang mengubah isi data tanpa = gak kena bungkus.

push gak memicu update

Ini keranjang Warung Bu Sri:

<script>
  let keranjang = ["Nasi Goreng", "Es Teh", "Mie Ayam"]

  function tambah() {
    keranjang.push("Es Jeruk")
  }
</script>

<button on:click={tambah}>Tambah Es Jeruk</button>
<p>Total: {keranjang.length}</p>

Di kode hasil compile, isi tambah tetap keranjang.push("Es Jeruk");, tanpa $invalidate. push mengubah isi array, tapi itu bukan assignment:

Kejadian	Isi `keranjang` di memori	Tampil
Awal	3 item	Total: 3
Klik 1	4 item	Total: 3
Klik 2	5 item	Total: 3

Tampilannya tetap Total: 3, padahal array-nya sudah berisi 4. Itu jawaban tebakannya. Belnya gak pernah bunyi. Hal yang sama berlaku untuk method lain yang mengubah array di tempat: pop, shift, splice, sort.

Ada dua cara membetulkannya:

// Cara 1: buat array baru dan berikan ke variabelnya
function tambah() {
  keranjang = [...keranjang, "Es Jeruk"]
}

// Cara 2: push dulu, lalu berikan variabelnya ke dirinya sendiri
function tambah() {
  keranjang.push("Es Jeruk")
  keranjang = keranjang
}

Cara 1 adalah pola yang paling umum: items = [...items, newItem]. [...keranjang, "Es Jeruk"] menyalin isi lama ke array baru lalu menambah satu item. Compiler mengubahnya jadi $invalidate(0, keranjang = [...keranjang, "Es Jeruk"]).
Cara 2 terlihat aneh, tapi keranjang = keranjang adalah assignment, jadi compiler memasang bel di situ: $invalidate(0, keranjang).
Kalau kamu sudah push dua kali tanpa bel, lalu satu assignment terjadi, tampilannya langsung lompat dari Total: 3 ke Total: 5. Datanya sudah ada dari tadi, yang kurang cuma pemberitahuannya.
Assignment ke isi array atau objek juga dihitung: keranjang[keranjang.length] = "Es Jeruk" atau pesanan.meja = 4 ikut memperbarui tampilan.

Latihan kedua memakai pola cara 1 dengan array ["A", "B", "C"]: tombol Tambah menjalankan items = [...items, "D"], dan <p>Total: {items.length}</p> berubah dari Total: 3 jadi Total: 4.

Svelte 5: $state

Di Svelte 5 dengan runes, state ditandai dengan $state:

<script>
  let keranjang = $state(["Nasi Goreng", "Es Teh", "Mie Ayam"])

  function tambah() {
    keranjang.push("Es Jeruk")
  }
</script>

<button onclick={tambah}>Tambah Es Jeruk</button>
<p>Total: {keranjang.length}</p>

$state(...) membuat state yang reaktif. Array dan objek di dalamnya dibungkus proxy, objek perantara yang tahu tiap kali isinya diubah. Jadi push di sini langsung membuat tampilannya Total: 4.
Counter-nya jadi let count = $state(0) dengan onclick={() => count += 1}.
Svelte 5 tanpa runes berperilaku seperti Svelte 4: push di let keranjang biasa tetap gak memperbarui tampilan.
Di editor latihan, kode yang memakai $state di-compile dengan Svelte 5 dan ikut lulus. Tapi onclick tanpa $state di-compile dengan Svelte 4, dan tombolnya diam saja.

⚠️ Jebakan yang sering ketemu

push, pop, splice, atau sort tanpa assignment. Datanya berubah, tampilannya enggak. Pakai items = [...items, newItem], atau tambahkan items = items setelahnya.
Variabel turunan yang ditulis dengan let biasa. let total = keranjang.length cuma dihitung sekali saat komponen dibuat, jadi tetap 3 walaupun keranjangnya bertambah. Tampilkan {keranjang.length} langsung, atau pakai reactive declaration $: dari pelajaran berikutnya.
onclick tanpa $state di editor latihan. Untuk gaya Svelte 4 tulis on:click. Untuk gaya Svelte 5, tulis onclick bersama $state.

TL;DR: Di Svelte 4, tampilan diperbarui oleh assignment ke variabel state: count += 1, count++, items = [...items, newItem]. Compiler membungkus tiap assignment dengan $invalidate, yang memberi tahu Svelte variabel mana yang berubah. push, pop, splice, dan sort mengubah isi array tanpa assignment, jadi tampilannya tetap (Total: 3 walaupun isinya 4) sampai ada assignment berikutnya, misalnya items = items. Assignment ke isi seperti arr[i] = x atau obj.x = y ikut dihitung. Di Svelte 5, let keranjang = $state([...]) membungkus array dengan proxy, jadi push langsung memperbarui tampilan, dan event-nya ditulis onclick.