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

Made with Slides.com

Svelte 5 Reactivity: A Beginner's Guide

  • 67

More from Elise Allen