svelte-core-bestpractices

Only use the $state rune for variables that should be reactive — in other words, variables that cause an $effect , $derived or template expression to update. Everything else can be a normal variable. Objects and arrays ( $state({...}) or $state([...]) ) are made deeply reactive, meaning mutation will trigger updates. This has a trade-off: in exchange for fine-grained reactivity, the objects must be proxied, which has performance overhead. In cases where you're dealing with large objects that are only ever reassigned (rather than mutated), use $state.raw instead. This is often the case with API responses, for example. To compute something from state, use $derived rather than $effect : [!NOTE] $derived is given an expression, not a function. If you need to use a function (because the expression is complex, for example) use $derived.by .