English for Svelte 5 Runes

Svelte 5’s runes replaced implicit reactivity (let variables and $: statements) with explicit function calls ($state, $derived, $effect), and the vocabulary shifted accordingly. Teams migrating a codebase need precise language to describe what changed, especially when explaining to reviewers why a component behaves differently than it did in Svelte 4. This guide covers the terms.

Key Vocabulary

Rune — a special compiler-recognized symbol ($state, $derived, $effect, $props) that marks reactive behavior explicitly, replacing Svelte 4’s implicit reactivity. “Runes make reactivity explicit in the code itself, so you don’t have to infer it from a bare let declaration anymore.”

$state — the rune that declares a reactive variable, replacing a plain let at the top level of a Svelte 4 component. “We wrapped the counter in $state(0) so updates to it automatically trigger a re-render, just like a Svelte 4 let count = 0 used to.”

$derived — the rune that declares a value computed from other reactive state, replacing the $: reactive statement for computed values. “Instead of a $: doubled = count * 2 reactive statement, we now write let doubled = $derived(count * 2).”

$effect — the rune that runs a side effect whenever its reactive dependencies change, replacing $: statements used for side effects like logging or DOM manipulation. “We moved the analytics call into an $effect block since it’s a side effect, not a derived value — it shouldn’t return anything.”

Fine-grained reactivity — Svelte 5’s underlying reactivity model, where individual signals update independently rather than the whole component re-rendering on any state change. “Fine-grained reactivity means only the specific text node bound to count updates, not the entire component tree.”

Rune migration — the process of converting a Svelte 4 component’s implicit let/$: reactivity to explicit runes, often assisted by Svelte’s official migration tool. “The rune migration tool converted most of the component automatically, but we had to manually fix a few $: blocks that mixed derived values with side effects.”

Common Phrases

• “Should this be $state or $derived? It looks like you’re computing it from another value, not declaring new state.”
• “This $effect is doing too much — can we split the side effect from the derived calculation?”
• “Did the migration tool convert this correctly, or is it still using the old $: syntax?”
• “Is this reactivity actually fine-grained here, or is the whole component still re-rendering?”
• “Why is this rune not triggering an update — is it being read outside a reactive context?”

Example Sentences

Explaining a migration decision in a PR description: “I converted this component’s $: statements to $derived and $effect separately, since the old code mixed a computed value with a console log in the same reactive statement, which the new runes API doesn’t allow you to conflate.”

Reporting a reactivity bug: “The UI isn’t updating when the prop changes — it turns out the value was destructured outside of $derived, so it’s just a plain snapshot instead of a reactive value.”

Discussing the migration with a teammate: “Most of the migration was mechanical, but the trickiest part was untangling $effect blocks that were secretly also computing derived values — we had to split each one into a $derived plus a much smaller $effect.”

Professional Tips

• Say “rune” as the general term, but name the specific rune ($state, $derived, $effect) when describing a bug — “the reactivity is broken” is far less actionable than “the $effect isn’t re-running.”
• Distinguish derived values (pure computations) from effects (side effects) explicitly in code review — mixing them was a common Svelte 4 anti-pattern that runes are designed to prevent.
• Use “fine-grained reactivity” when explaining performance improvements to stakeholders — it’s the underlying reason Svelte 5 updates can be faster than whole-component re-renders.
• Reference the migration tool by name when discussing upgrade effort, and clarify which parts still needed manual fixes, since automated migration is rarely fully complete.

Practice Exercise

1. Explain in two sentences the difference between $derived and $effect.
2. Write a one-sentence bug report describing a value that isn’t updating because it was read outside a reactive context.
3. Describe, in your own words, what “fine-grained reactivity” means compared to whole-component re-rendering.