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>

Let's build a reactive component using the following example code:

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

<style>
  h1 {
    color: blue;
  }

  button {
    margin-top: 1em;
    padding: 0.5em 1em;
    font-size: 16px;
  }
</style>

In this example, we use the $state rune to initialize an array of numbers. The $derived rune is then used to calculate the total sum of these numbers. The addNumber function adds a new number to the array, demonstrating how the component's state can be updated. As the state changes, the UI automatically updates to reflect the new total, showcasing Svelte's reactivity.