# 🧩 Svelte: Mudah Bukan Berarti Gampang Dipelihara

> *"Wah, kok simple banget ya bikin UI di Svelte. Jauh lebih singkat daripada React!"*  
> Ya, memang benar. Tapi... hati-hati. **Svelte itu mudah ditulis, tapi belum tentu mudah dipelihara** — apalagi di proyek kompleks.

Mari kita bahas kenapa.

---

### ✅ 1. Svelte Terlihat Sangat Sederhana

Contoh counter:

```svelte
<script>
  let count = 0;
</script>

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

👆 *"Lho, ini mah lebih pendek dari React!"*  
Benar, karena Svelte menggunakan pendekatan **compile-time reactivity** — tidak perlu `useState` atau `useEffect`. Cukup `let`, dan semuanya langsung reaktif.

---

### ⚠️ 2. Tapi Reaktivitas Ini Bisa Menjebak

#### Contoh jebakan:

```svelte
let items = [1, 2, 3];

function addItem() {
  items.push(4); // Tidak akan memicu update DOM!
}
```

Kenapa? Karena Svelte hanya memantau **assignment**, bukan mutasi internal.

✅ Solusi:

```svelte
items = [...items, 4];
```

---

### 🧠 3. Reactive Statements = Pedang Bermata Dua

```svelte
$: total = harga * jumlah;
```

💡 Mudah untuk menghitung nilai turunan. Tapi...

Jika kamu punya:

```svelte
$: diskon = total * 0.1;
$: hargaAkhir = total - diskon;
```

➡️ Sekilas rapi, tapi jika rantai ini makin panjang, akan sulit dilacak dan rawan efek domino.

---

### 🧵 4. Tidak Ada Struktur Lifecycle Sejelas React

Di React:

* `useEffect` punya dependency list
    
* `useLayoutEffect` jelas urutannya
    
* `useMemo` untuk cache
    
* `useCallback` untuk optimalisasi
    

Di Svelte? Semua bisa `$:`. Simpel, tapi semua campur aduk kalau tidak disiplin.

---

### 🔍 5. Kode Terlalu Ajaib = Sulit Dibaca

Kode yang terlalu pendek kadang **kehilangan konteks**, terutama untuk developer lain atau kamu di masa depan.

Contoh:

```svelte
$: hasil = data ? proses(data) : null;
```

Tanpa penjelasan, siapa tahu `data` dari mana? `proses` efek samping atau murni?  
Kalau di React, kamu akan *dipaksa* memisah menjadi hook atau fungsi jelas.

---

### 🧱 6. Struktur Proyek Besar Harus Kamu Tentukan Sendiri

React (dengan Next.js, misalnya) punya:

* App router
    
* Folder `app`, `components`, `hooks`, dsb
    

Svelte? Kamu bebas.

> Tapi kebebasan tanpa panduan bisa bikin struktur proyek kacau kalau timnya belum berpengalaman.

---

## 💡 Jadi, Apa Solusinya?

1. **Disiplin menulis reaktivitas**: jangan asal `$:`, gunakan helper function/folder terpisah.
    
2. **Gunakan store jika state mulai menyebar** ke banyak komponen.
    
3. **Dokumentasikan dependency reaktif** jika kompleks.
    
4. **Gunakan** `onMount`, `onDestroy` untuk efek samping, jangan semuanya `$:`.
    
5. **Buat arsitektur sendiri**: misalnya folder `components`, `stores`, `lib`, `routes`.
    

---

## ✍️ Penutup: Simple = Powerful, Tapi…

Svelte memang memberikan **pengalaman menulis UI yang menyenangkan**, tapi jangan terkecoh dengan kesederhanaannya.

> **Mudah ditulis bukan berarti mudah dirawat.**

Gunakan kemudahan itu dengan bijak, dan kamu akan punya aplikasi yang cepat, efisien, dan tetap nyaman dikembangkan jangka panjang.