svelte5-best-practiceslisted

# Svelte 5 Best Practices ## Quick Reference | Topic | When to Use | Reference | |-------|-------------|-----------| | **Runes** | $state, $derived, $effect, $props, $bindable, $inspect | [runes.md](references/runes.md) | | **Snippets** | Replacing slots, {#snippet}, {@render} | [snippets.md](references/snippets.md) | | **Events** | onclick handlers, callback props, context API | [events.md](references/events.md) | | **TypeScript** | Props typing, generic components | [typescript.md](references/typescript.md) | | **Migration** | Svelte 4 to 5, stores to runes | [migration.md](references/migration.md) | | **SvelteKit** | Load functions, form actions, SSR, page typing | [sveltekit.md](references/sveltekit.md) | | **Performance** | Universal reactivity, avoiding over-reactivity, streaming | [performance.md](references/performance.md) | ## Essential Patterns ### Reactive State ```svelte <script> let count = $state(0); // Reactive state let doubled = $derived(count * 2); // Computed value </script> ``` ### Component Props ```svelte <script> let { name, count = 0 } = $props(); let { value = $bindable() } = $props(); // Two-way binding </script> ``` ### Snippets (replacing slots) ```svelte <script> let { children, header } = $props(); </script> {@render header?.()} {@render children()} ``` ### Event Handlers ```svelte <!-- Svelte 5: use onclick, not on:click --> <button onclick={() => count++}>Click</button> ``` ### Callback Props (replacing createEv