svelte5-best-practices

Svelte 5 runes, snippets, and SvelteKit patterns for modern component development. - Covers all Svelte 5 runes ($state, $derived, $effect, $props, $bindable, $inspect) with reactive state and computed value patterns - Explains snippets syntax ({#snippet}, {@render}) as the replacement for slots and slot props - Includes event handling migration from on: directives to onclick handlers and callback props, plus SvelteKit load functions and form actions - Provides TypeScript typing for props, generic components, and SSR state isolation patterns - Documents Svelte 4 to 5 migration paths including stores-to-runes and slots-to-snippets conversions with common pitfalls to avoid - 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 - 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