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}`);

Made with Slides.com