Svelte 5 Reactivity: A Beginner's Guide
What is Reactivity?
- Reactivity is Svelte's way of automatically updating your app when data changes
- Think of it like a chain reaction: when one value changes, everything that depends on it updates automatically
Making Variables Reactive
The "Runes" Syntax
let count = $state(0);
// count can change after the page is loaded
let doubled = $derived(count * 2);
// doubled will update whenever count changes
Basic Rules
- Variables declared with
$state()
are reactive - Runes look like functions, but they’re not — when you use Svelte, they’re part of the language itself.
// Good - reactive
let name = $state("Alice");
name = "Bob"; // This change will trigger updates
// Not reactive - const
const user = "Alice"; // can't change
// Also reactive - object property
let user = $state({ name: "Alice" });
user.name = "Bob"; // Will trigger reactivity
Understanding State
- State is any data that might change over time
- Examples: user input, API data, toggle states
- Must use
$state()
for state variables
let isLoggedIn = $state(false);
let userName = $state("");
let todos = $state([]);
Derived Reactivity
Reactive Statements
let firstName = $state("John");
let lastName = $state("Doe");
let fullName = $derived(`${firstName} ${lastName}`);
Svelte 5 Reactivity: A Beginner's Guide
By Elise Allen
Svelte 5 Reactivity: A Beginner's Guide
- 62