Svelte 4 Reactivity: A Beginner's Guide

1. 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

2. Making Variables Reactive

The $: Syntax

let count = 0;
$: doubled = count * 2;  // doubled will update whenever count changes

Basic Rules

• Variables declared with let can be reactive
• Must be declared at the component's top level
• Assignment triggers reactivity

// Good - reactive
let name = "Alice";
name = "Bob";  // This change will trigger updates

// Not reactive - const
const user = "Alice";

// Not reactive - object property
let user = { name: "Alice" };
user.name = "Bob";  // Won't trigger reactivity!

3. Common Reactivity Gotchas

Arrays and Objects

// Won't work
let numbers = [1, 2, 3];
numbers.push(4);  // Modifying array in place

// Will work
numbers = [...numbers, 4];  // Creating new array

// For objects
let user = { name: "Alice" };
user = { ...user, name: "Bob" };  // Create new object

4. Understanding State

• State is any data that might change over time
• Examples: user input, API data, toggle states
• Must use let for state variables

let isLoggedIn = false;
let userName = "";
let todos = [];

5. Derived Reactivity

Reactive Statements

let firstName = "John";
let lastName = "Doe";

$: fullName = `${firstName} ${lastName}`;
$: console.log(`Name changed to ${fullName}`);

Reactive Blocks

$: {
    console.log(`First name is ${firstName}`);
    console.log(`Last name is ${lastName}`);
}

6. Reactive Functions

let count = 0;

// This function runs whenever count changes
$: updateTitle(count);

function updateTitle(count) {
    document.title = `Count: ${count}`;
}

7. Best Practices

• Keep reactive statements simple and focused
• Use reactive declarations for derived values
• Remember to create new arrays/objects instead of mutating
• Put reactive statements at the top level of your component

8. Reactive Stores

For Component-to-Component Reactivity

import { writable } from 'svelte/store';

// Create a store
const count = writable(0);

// Subscribe to changes with $
$count = 1;  // Sets value
console.log($count);  // Reads value

Common Debugging Tips

1. Check if you're using let instead of const
2. Verify assignments create new references for arrays/objects
3. Ensure reactive statements are at the component top level
4. Use Svelte DevTools to inspect reactive values