# Svelte 5 Runes Explained: $state, $derived, $effect (2026) Runes are Svelte 5's explicit reactivity primitives, written with a `$` prefix. Use `$state` to declare reactive values, `$derived` to compute values from other state, and `$effect` only for side effects like network calls or DOM work. Reach for `$derived` before `$effect`. ## TL;DR Svelte 5 (stable since October 19, 2024; 5.56.x as of June 2026) replaced the compiler's implicit reactivity with **runes** — function-like symbols such as `$state`, `$derived`, and `$effect`.[^alive][^june] The mental shift is simple: `$state` holds values, `$derived` computes values, and `$effect` runs side effects. A common mistake is using `$effect` to sync one value to another — the docs explicitly advise against it; use `$derived` instead.[^effect] Svelte 4 stores still work, so migration can be gradual.[^runes] ## What you'll learn - What runes are and why Svelte 5 introduced them - How `$state` works, including deep reactivity, `$state.raw`, and `$state.snapshot` - How `$derived` and `$derived.by` replace `$:` computed values - What `$effect` is for — and the cases where you should *not* use it - A decision rule for `$derived` vs `$effect` - How `$props` and `$bindable` replace `export let` - Whether Svelte stores still work, and how to migrate Svelte 4 reactivity to runes ## What are runes in Svelte 5? Runes are special symbols, prefixed with `$`, that tell the Svelte compiler how reactivity works. They look like function calls but are compiler keywords — you don't import them, and they only have meaning inside `.svelte`, `.svelte.js`, and `.svelte.ts` files.[^runes] Svelte 5 ships seven runes: `$state`, `$derived`, `$effect`, `$props`, `$bindable`, `$inspect`, and `$host`.[^state] Before runes, Svelte 4 made every top-level `let` in a component reactive and used the `$:` label for computed values. That was concise but magical: reactivity depended on where code lived. Runes make reactivity explicit and portable — the same `$state` works inside a component or inside a plain `.svelte.js` module — which is why you can now keep shared reactive logic outside components entirely.[^runes] ```svelte ``` ## How does $state work in Svelte 5? `$state` declares a reactive value: when it changes, the UI that reads it updates. It is the direct replacement for a plain reactive `let` from Svelte 4.[^state] ```svelte ``` The important detail: objects and arrays passed to `$state` become **deeply reactive proxies**. Mutating a nested property — `user.tags.push(...)` above — triggers updates, with no reassignment needed.[^derived] That is a real change from Svelte 4, where you had to reassign (`user = user`) to force an update. Two `$state` variants handle edge cases: - **`$state.raw`** creates *shallow* state. It is not made deeply reactive and only updates when you **replace** it (reassign the whole value), not when you mutate it. This avoids the cost of proxying large objects or arrays you never mutate.[^stateraw] - **`$state.snapshot`** returns a detached, plain (non-proxy) copy of a deep `$state` object. Mutating the snapshot does not affect the original, and reading it does not register a dependency — useful when passing data to a non-Svelte library that chokes on proxies.[^stateraw] You can also mark class fields as `$state`, which is how you build reusable reactive classes.[^derived] ## How does $derived work? ($derived vs $:) `$derived` declares a value computed from other reactive state, recomputed automatically when its dependencies change. It replaces Svelte 4's `$:` computed declarations.[^derived] ```svelte ``` The expression inside `$derived(...)` **must be free of side effects** — Svelte disallows state changes like `count++` inside a derived.[^derived] For logic that doesn't fit in one expression, use `$derived.by`, which takes a function: ```svelte ``` `$derived(expr)` is exactly equivalent to `$derived.by(() => expr)`.[^derived] Three behaviors are worth knowing because they explain why deriveds are cheap: - **Lazy and memoized.** Svelte uses *push-pull* reactivity: when state changes, dependents are notified (push), but a derived is not recalculated until it is actually read (pull). A derived that is never accessed never runs.[^derived] - **Referential short-circuiting.** If a recomputed derived is referentially identical to its previous value, downstream updates are skipped.[^derived] - **Overridable.** Since Svelte 5.25, you can temporarily reassign a derived (unless it's `const`) — handy for optimistic UI where you show an immediate change before the server confirms it.[^derived] ## When should you use $effect — and when not to? `$effect` runs a function when its reactive dependencies change. It is for **side effects**: calling third-party libraries, drawing on a `

#runes

شرح Svelte 5 Runes: $state, $derived, $effect (2026)