svelte-core-bestpractices

Use $state for variables that should trigger reactive updates, and $derived for values computed from state instead of updating them inside $effect. Objects and arrays in $state are deeply reactive; use $state.raw for large reassigned-only data like API responses.

Replace implicit reactivity with $state, $: statements with $derived or $effect, export let with $props, on:click with onclick, slots with snippets and {@render}, and actions with {@attach}. Always use runes mode for new code.

$effect is an escape hatch and should mostly be avoided, especially for updating state. Prefer event handlers for user interaction, {@attach} for syncing with external libraries like D3, and createSubscriber for observing external event-based systems.

Yes, Svelte 5.36+ supports await in the component script, $derived declarations, and markup, but it requires enabling the experimental.async option in svelte.config.js. Errors bubble to the nearest svelte:boundary, and pending snippets show loading states.

Values computed directly from props are not reactive, so wrap them in $derived to re-evaluate when props change. You can also add $inspect.trace() as the first line of an effect or derived to trace which dependency triggered an update.