Reactive Variable dan Reactive Assignment dalam Svelte Hari ke5

Sun, May 2025 19:10:41

Dalam pengembangan aplikasi web modern, reaktivitas menjadi salah satu konsep penting yang memungkinkan tampilan antarmuka pengguna (UI) untuk selalu selaras dengan data yang mendasarinya. Svelte, sebagai salah satu framework JavaScript modern, memiliki pendekatan unik terhadap reaktivitas melalui fitur yang disebut reactive assignment atau penugasan reaktif.

Dalam artikel ini, kita akan membahas secara mendalam tentang reactive variable di Svelte, penggunaan sintaks $:, serta bagaimana fitur ini membantu pengembang menciptakan aplikasi yang efisien dan mudah dipelihara. Mari kita mulai dengan pemahaman dasar tentang reaktivitas di Svelte.

Apa Itu Reaktivitas?

Secara umum, reaktivitas adalah kemampuan sebuah sistem untuk merespons perubahan data dan secara otomatis memperbarui tampilan atau proses lain yang bergantung pada data tersebut. Dalam banyak framework frontend seperti React atau Vue, reaktivitas biasanya diatur dengan sistem state management dan mekanisme deteksi perubahan.

Svelte menawarkan pendekatan yang berbeda. Alih-alih menggunakan Virtual DOM atau sistem observasi data yang rumit, Svelte mengompilasi kode yang kita tulis menjadi JavaScript murni yang sangat efisien. Dalam proses ini, Svelte secara otomatis membuat kode-kode yang akan memperbarui DOM ketika nilai variabel berubah.

Reactive Variable di Svelte

Di Svelte, setiap variabel yang dideklarasikan di bagian script (tanpa ekspor) adalah bagian dari component state. Ketika nilai dari variabel tersebut berubah, maka bagian template yang menggunakan variabel tersebut akan otomatis diperbarui.

Namun, ketika kita ingin menciptakan derived values—yaitu nilai baru yang tergantung dari variabel lain—di sinilah reactive assignment dengan sintaks $: expression menjadi sangat berguna.

Sintaks :$ dalam Reactive Assignment

Sintaks :$ digunakan untuk menandai bahwa suatu blok kode atau ekspresi adalah reaktif. Artinya, blok tersebut akan dievaluasi ulang setiap kali ada variabel yang digunakan di dalamnya mengalami perubahan nilai.

Contoh dasar:

<script>
  let count = 0;
  $: doubled = count * 2;
</script>

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

Dalam contoh di atas, setiap kali count berubah, nilai doubled akan diperbarui secara otomatis. Kita tidak perlu menulis kode tambahan untuk memastikan bahwa doubled selaras dengan count. Svelte akan menangani ini untuk kita.

Reactive Statements

Selain penugasan seperti doubled = count * 2, kita juga bisa membuat pernyataan reaktif yang berisi ekspresi lain, seperti pemanggilan fungsi:

<script>
  let name = 'Dunia';
  
  $: console.log(`Halo, ${name}!`);
</script>

<input bind:value={name} />

Pada contoh di atas, setiap kali name berubah, maka fungsi console.log akan dieksekusi ulang. Ini sangat berguna untuk melakukan efek samping berdasarkan perubahan data.

Penggunaan dengan Kondisi dan Loop

Pernyataan reaktif juga bisa digunakan dengan struktur kontrol seperti kondisi dan perulangan. Namun, harus hati-hati karena terlalu banyak logika di dalam reactive statement bisa membuat kode sulit dibaca dan dipelihara.

Contoh:

<script>
  let items = [1, 2, 3];
  $: total = items.reduce((a, b) => a + b, 0);
</script>

<p>Total: {total}</p>

Pembaruan Bertahap dan Optimalisasi

Salah satu keuntungan besar dari pendekatan reaktivitas Svelte adalah efisiensinya. Svelte hanya memperbarui bagian DOM yang memang perlu, dan menghindari pembaruan berlebih. Misalnya, jika doubled tidak digunakan di template, maka meskipun nilainya berubah, DOM tidak akan tersentuh.

Reaktivitas dan Fungsi

Ketika menggunakan fungsi, penting untuk menyadari bahwa :$ hanya akan memicu ulang ketika variabel yang digunakan secara langsung di dalam ekspresi mengalami perubahan.

<script>
  let a = 1, b = 2;

  function sum(x, y) {
    return x + y;
  }

  $: total = sum(a, b);
</script>

Dalam contoh ini, total akan berubah jika a atau b berubah, karena keduanya digunakan dalam ekspresi reaktif.

Reactive Labels dan Scope

Semua reactive statement berada dalam cakupan (scope) lokal komponen. Tidak bisa mengakses variabel dari komponen lain secara langsung, kecuali melalui props atau store.

Jika kita ingin memecah kode menjadi beberapa bagian yang tetap reaktif, kita bisa menggunakan beberapa :$ statement terpisah.

<script>
  let count = 1;
  $: doubled = count * 2;
  $: tripled = count * 3;
</script>

Kapan Menggunakan Reactive Assignment?

Gunakan :$ ketika:

• Anda membuat variabel baru yang tergantung pada variabel lain.
• Anda ingin mengeksekusi fungsi ketika ada perubahan pada satu atau lebih variabel.
• Anda ingin melakukan debugging dan ingin tahu kapan sesuatu berubah.

Hindari penggunaan :$ untuk logika kompleks atau pemrosesan berat secara langsung. Pisahkan ke dalam fungsi agar lebih bersih.

Perbandingan dengan Framework Lain

• React: Anda harus menggunakan useEffect untuk menjalankan efek samping, dan useState untuk menyimpan state. Di Svelte, :$ menyatukan keduanya secara lebih alami.
• Vue: Memiliki sistem reaktivitas berbasis observasi. Anda harus memanipulasi data melalui data, computed, dan watchers. Svelte menghindari sistem ini dengan reaktivitas berbasis kompilasi.

Kesimpulan

Reactive assignment dengan sintaks :$ adalah salah satu fitur paling khas dan kuat di Svelte. Ia memungkinkan kita membuat kode yang ringkas, efisien, dan mudah dibaca, tanpa harus memikirkan sinkronisasi state secara eksplisit.

Dengan memahami cara kerja reactive variable dan kapan menggunakannya, Anda bisa membuat aplikasi web yang lebih responsif dan mudah dipelihara.

Terus eksplorasi fitur-fitur lainnya di Svelte dan manfaatkan pendekatan reaktif ini untuk menyederhanakan logika aplikasi Anda.