Reactivity in Svelte

Welcome back! In the previous lesson, you learned how to create your first Svelte component and manage state using runes, a new feature in Svelte 5. Now, we will delve deeper into Svelte's unique approach to reactivity. Reactivity is a core concept in Svelte that allows your application to respond dynamically to changes in state. Unlike traditional frameworks that use stores, Svelte 5 introduces runes to handle reactivity, making it more intuitive and efficient. In this lesson, we will explore how to use runes to create reactive components that update automatically when the state changes.

In Svelte, runes are the primary mechanism for managing state and reactivity. You have already been introduced to the $state rune, which allows you to define reactive state variables. This lesson will also introduce the $derived rune, which is used to compute values based on changes in state. The $state rune is straightforward: it creates a reactive variable that updates the UI whenever its value changes. The $derived rune, on the other hand, is used to derive new values from existing state variables, ensuring that your UI remains consistent with the underlying data.

The $derived rune in Svelte is used to compute values based on other reactive state variables. It automatically updates whenever its dependencies change, making it useful for keeping derived values consistent without manual recalculations. This improves code clarity and efficiency by separating computed logic from state mutations.

Consider the following example where we use $derived to calculate a sum of numbers:

<script lang="ts">
    let numbers: number[] = $state([1, 2, 3, 4]);
    let total: number = $derived(numbers.reduce((t, n) => t + n, 0));

    function addNumber() {
        numbers.push(numbers.length + 1);
    }
</script>

<p>{numbers.join(' + ')} = {total}</p>

<button onclick={addNumber}>
    Add a number
</button>