SVElte5 Props Effects

Ringkasan

$props() menggantikan export let untuk menerima props. $effect menjalankan side-effect saat dependency berubah.

Konsep Dasar

• let { name, age = 18 } = $props(); — destructure + default.
• $props() bisa terima children (snippet).
• $effect(() => {...}) jalan saat reactive deps berubah; auto-track.
• $effect.pre jalan sebelum DOM update.

Cara Kerja / Struktur

svelte

<script>
  let { name, onclose } = $props();
  $effect(() => { document.title = name; });
</script>
<h1>{name}</h1>

Catatan Implementasi

• $effect tidak boleh async; untuk cleanup pakai return function.
• Hindari $effect untuk derived data (pakai $derived).

Kesalahan Umum

• Mutasi state di $effect yang memicu effect sendiri → loop.
• Pakai export let di runes mode (campur mode tidak disarankan).

Glosarium

• Props: data dari parent ke child.
• Effect: reaksi samping thd perubahan state.

Referensi

• Svelte Props & Events