Mengenal Rune di Svelte 5: Masa Depan Reaktivitas_

Pendahuluan

Selama bertahun-tahun, Svelte menonjol dalam jajaran kerangka kerja (framework) frontend karena memperkenalkan reaktivitas berbasis kompilasi (compiler-driven). Berbeda dengan React atau Vue, Svelte 3 dan 4 tidak bergantung pada pohon virtual DOM yang kompleks atau kelas observer yang rumit saat aplikasi berjalan. Sebaliknya, kompiler Svelte menerjemahkan deklarasi reaktif langsung ke pembaruan DOM mentah yang sangat efisien.

Meskipun sintaks reaktif Svelte 4—seperti penggunaan variabel `let` lokal dan pernyataan reaktif `$:`—berfungsi dengan sangat baik untuk komponen sederhana, hal tersebut memicu keterbatasan arsitektur pada aplikasi berskala besar. Reaktivitas terikat erat pada batas komponen saja, membuat pengelolaan state global menjadi menantang dan memicu ambiguitas kompiler.

Svelte 5 merombak paradigma tersebut dengan memperkenalkan Runes. Rune adalah sekumpulan fungsi primitif eksplisit yang dikenali langsung oleh kompiler untuk menghadirkan reaktivitas berbasis sinyal (signal-based reactivity) yang sangat fleksibel.

1. Tiga Rune Inti

Jantung dari Svelte 5 terletak pada tiga rune utama: `$state()`, `$derived()`, dan `$effect()`. Elemen-elemen ini menggantikan peran variabel `let`, deklarasi `$:` yang lama, dan fungsi daur hidup (lifecycle functions) di Svelte 4 (seperti `onMount`).

$state()

Rune `$state()` mendeklarasikan variabel reaktif. Svelte mengubah variabel ini menjadi sinyal, memastikan perubahan data memicu pembaruan tepat sasaran di DOM.

<!-- Reaktivitas di Svelte 5 -->
<script lang="ts">
	let count = $state(0);
</script>

<button onclick={() => count++}>
	Klik: {count}
</button>

$derived()

Rune `$derived()` mendefinisikan nilai terhitung yang otomatis memperbarui dirinya ketika variabel state reaktif yang mendasarinya berubah. Ini menggantikan peran deklarasi reaktif `$:` yang lama.

<script lang="ts">
	let count = $state(0);
	let double = $derived(count * 2);
</script>

<p>Nilai Ganda: {double}</p>

$effect()

Rune `$effect()` menangani proses efek samping (side-effects). Rune ini melacak semua variabel reaktif di dalamnya dan otomatis menjalankan kembali logika saat nilai variabel tersebut berubah. Fungsi ini menggantikan peran `onMount`, `onDestroy`, dan `afterUpdate`.

<script lang="ts">
	let count = $state(0);

	$effect(() => {
		console.log(`Nilai count berubah menjadi: ${count}`);
		
		// Fungsi pembersihan opsional (cleanup)
		return () => {
			console.log('Cleanup dijalankan sebelum daur hidup berikutnya atau penghancuran komponen');
		};
	});
</script>

2. Perbandingan Teknis Svelte 4 vs Svelte 5

Memahami pergeseran struktur ini memperlihatkan betapa bersih dan prediktabilnya Svelte 5:

3. State Global Menggunakan Kelas TypeScript

Pada Svelte 4, berbagi logika reaktif di luar berkas komponen mengharuskan penggunaan Svelte Stores (writable, derived). Svelte 5 menghilangkan batasan tersebut. Karena Rune dapat bekerja di luar berkas komponen, Anda dapat merangkum variabel state reaktif di dalam kelas TypeScript biasa.

Berikut contoh enkapsulasi state Counter global:

// src/lib/stores/counter.svelte.ts
export class CounterStore {
	#count = $state(0);

	get count() {
		return this.#count;
	}

	increment() {
		this.#count++;
	}

	decrement() {
		this.#count--;
	}
}

// Instansiasi sebagai singleton global
export const globalCounter = new CounterStore();

Setiap komponen Svelte dapat mengimpor dan menggunakan objek kelas ini secara langsung, dan UI akan tetap reaktif dengan sempurna:

<script lang="ts">
	import { globalCounter } from '$lib/stores/counter.svelte';
</script>

<button onclick={() => globalCounter.increment()}>
	Jumlah Global: {globalCounter.count}
</button>

4. Menghindari Penyalahgunaan $effect

Meskipun `$effect()` sangat praktis, hindari penggunaannya untuk menghitung data lokal karena dapat memicu render berulang:

// ❌ SALAH: Jangan gunakan $effect untuk kalkulasi lokal
let count = $state(0);
let double = $state(0);

$effect(() => {
	double = count * 2;
});

Ini adalah anti-pola yang memboroskan siklus rendering. Sebagai gantinya, gunakan selalu `$derived()` untuk perhitungan sinkron:

// ✅ BENAR: Perhitungan sinkron terhitung yang bersih
let count = $state(0);
let double = $derived(count * 2);

Kesimpulan

Rune di Svelte 5 membawa era baru bagi kenyamanan pengembang. Dengan menggantikan kebiasaan kompilasi lama menggunakan sinyal eksplisit, Rune menghadirkan konsistensi, skalabilitas, dan performa luar biasa dalam kode aplikasi Anda.