svelte-core-bestpractices

Svelte 5 runes provide reactive state management through $state for updates, $state.raw for large immutable objects, and $derived for computations. Apply these runes instead of legacy reactivity patterns to ensure fast and robust component behavior.

Use $effect sparingly for synchronization in Svelte components. Prefer event handlers and attachments over $effect to maintain reactivity discipline, and apply $inspect.trace to diagnose complex reactivity issues during debugging.

The best way to handle Svelte 5 component authoring is using $props for inputs and snippets with {#snippet ...} and {@render ...} for content composition. Combine these with keyed {#each} blocks for optimal rendering performance.

Debug Svelte reactivity issues using $inspect.trace to diagnose state and derived value updates. This traces reactive dependencies without requiring unsafe patterns, helping identify performance bottlenecks in component effects.

Yes, Svelte 5 supports TypeScript for component patterns. Apply rune rules for $state, $derived, and $effect alongside TypeScript typing to write fast, robust components with context, attachments, and modern styling.

Avoid legacy Svelte features when refactoring to prevent performance and correctness pitfalls. Modern runes enforce safer reactivity rules, replacing outdated patterns with $state, $derived, and snippets for optimal component structure.