Svelte 5 Best Practices

Quick Reference

Topic When to Use Reference

Runes $state, $derived, $effect, $props, $bindable, $inspect runes.md

Snippets Replacing slots, {#snippet}, {@render} snippets.md

Events onclick handlers, callback props, context API events.md

TypeScript Props typing, generic components typescript.md

Migration Svelte 4 to 5, stores to runes migration.md

SvelteKit Load functions, form actions, SSR, page typing sveltekit.md

Performance Universal reactivity, avoiding over-reactivity, streaming performance.md

Essential Patterns

Reactive State

<script> let count = $state(0); // Reactive state let doubled = $derived(count * 2); // Computed value </script>

Component Props

<script> let { name, count = 0 } = $props(); let { value = $bindable() } = $props(); // Two-way binding </script>

Snippets (replacing slots)

<script> let { children, header } = $props(); </script>

{@render header?.()} {@render children()}

Event Handlers

<!-- Svelte 5: use onclick, not on:click --> <button onclick={() => count++}>Click</button>

Callback Props (replacing createEventDispatcher)

<script> let { onclick } = $props(); </script>

<button onclick={() => onclick?.({ data })}>Click</button>

Common Mistakes

• Using let without $state

• Variables are not reactive without $state()

• Using $effect for derived values - Use $derived instead

• Using on:click syntax - Use onclick in Svelte 5

• Using createEventDispatcher

• Use callback props instead

• Using <slot>

• Use snippets with {@render}

• Forgetting $bindable()

• Required for bind: to work

• Setting module-level state in SSR - Causes cross-request leaks

• Sequential awaits in load functions - Use Promise.all for parallel requests