Svelte 5 Runes: $state, $derived, dan $effect dalam 10 Menit

Svelte 5 memperkenalkan **runes**, yaitu penanda reaktivitas eksplisit yang menggantikan sintaks `let` reaktif dan `$:` pada versi sebelumnya. Hasilnya lebih mudah diprediksi dan bekerja juga di luar file `.svelte`. ## `$state`: nilai reaktif ```svelte count++}>Diklik {count} kali ``` Objek dan array yang dibungkus `$state` bersifat reaktif secara mendalam, sehingga `todos.push(...)` langsung memperbarui tampilan. ## `$derived`: nilai turunan ```svelte

Total: {total}

``` `total` dihitung ulang otomatis saat `price` atau `qty` berubah. Gunakan `$derived` untuk perhitungan murni, bukan `$effect`. ## `$effect`: efek samping ```svelte ``` Gunakan `$effect` hanya untuk efek samping seperti memanggil API, memanipulasi DOM, atau mengatur timer. ## `$props`: properti komponen ```svelte ``` ## Perubahan lain yang perlu diingat - Event handler memakai atribut biasa: `onclick`, bukan `on:click`. - Slot digantikan oleh *snippet*: `{@render children()}`. - State bersama bisa ditaruh di file `.svelte.js` dan di-export. ## Kesimpulan Pola pikirnya sederhana: `$state` untuk data, `$derived` untuk hasil turunan, `$effect` untuk efek samping. Mulailah dengan komponen kecil, lalu migrasikan sisanya secara bertahap.