Derived state with $derived and $derived.by

Derived state is declared with the $derived rune — let doubled = $derived(count * 2) — because component code runs only once at creation, so a plain variable keeps its original value when dependencies change. The expression inside $derived(...) must be free of side-effects; Svelte disallows state changes inside derived expressions. For derivations that do not fit a single expression, $derived.by accepts a function, and $derived(expression) is equivalent to $derived.by(() => expression). Anything read synchronously inside the expression or function body becomes a dependency: when it changes, the derived is marked dirty and recalculated when next read. An await inside the expression is transformed so state read after it is still tracked, and untrack exempts a value from being treated as a dependency. A derived declared with let can be temporarily overridden by reassignment — useful for optimistic UI — whereas prior to Svelte 5.25 deriveds were read-only. Unlike $state, $derived values are left as-is rather than converted to deeply reactive proxies, and class fields can be marked $derived. Scope: Svelte 5. Reviewed October 4, 2026.