svelte-core-bestpractices

From README

$state 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. $derived 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. Deriveds are writable — you can assign to them, just like $state, except that they will re-evaluate when their expression changes.