A Detailed Guide to Svelte Reactive Variables

In this post, we will learn how to use Svelte Reactive Variables. Basically, we will learn how reactivity in Svelte works while assigning a value to a variable. Also, we will learn how to create Svelte Reactive statements.

In case you are new to Svelte, you can check out the detailed post on walkthrough of a Svelte application.

1 – Reactive Assignments in Svelte

In Svelte, an assignment is reactive.

What does it mean?

Let’s check out a simple example as below:

<script>
    export let name;
    let bookCount = 0;

    function addBook() {
        bookCount = bookCount + 1
    }
</script>

<p>Welcome to the {name} Library</p>
<p>There are {bookCount} books in the library</p>
<button on:click="{addBook}">Add Book</button>

In the example, we have a variable bookCount. It has the starting value of 0. We use this in the second p tag in our markup where we try to display the bookCount.

Then, we have a button. On clicking that button, we call a function addBook. Basically, this function simply increments the bookCount variable.

You can run the application and click on the Add Book button in the browser. With every click, the bookCount increases. The change is also rendered in the {bookCount}. In other words, Svelte will make sure that if the value of a variable changes in our script code, the same should be reflected in the DOM.

Note that Svelte’s reactivity triggers only at the time of assignment using = operator. This creates an interesting situation for array update using standard push and pop functions. Please refer to our detailed post on Svelte array update method to delve into that topic.

2 – Making a Svelte Statement as Reactive

A top-level statement in Svelte can be made reactive by prefixing it with $: label. This is basically JS label syntax. However, Svelte uses it for making a statement reactive.

See below example:

export let name = "fantasy";

$: upperCaseTitle = name.toUpperCase();

Here, the second statement is reactive in nature. In other words, if the value of name changes, the value of upperCaseTitle changes accordingly. Basically, reactive statement run immediately before a component updates when the values they depend on change. Also, notice that we don’t need to declare the variable upperCaseTitle with a separate let statement. Svelte takes care of that automatically.

Let’s understand how we can cause the reactive statement to get triggered.

<script>
    export let name = "fantasy";
  
    $: upperCaseTitle = name.toUpperCase();

    function changeName() {
        name = "Science Fiction and Fantasy"
    }
</script>

<p>Welcome to the {upperCaseTitle} Library</p>
<button on:click="{changeName}">Change Library Name</button>

Here, we have a basic button. On clicking the button, we invoke the changeName() function that changes the value of name. When name changes, it causes the statement with $: prefix to get triggered and the upperCaseTitle gets the new value. We are using upperCaseTitle in the markup. Therefore, the component re-renders and the new value is displayed.

3 – Logical Operation in a Reactive Block

We can also have logical statements in the reactive block as below:

<script>
    export let name = "fantasy";
    let bookCount = 0

    $: upperCaseTitle = name.toUpperCase();

    $: if (name === "Science Fiction and Fantasy") {
        bookCount = 100
    }

    function changeName() {
        name = "Science Fiction and Fantasy"
    }
</script>

<p>Welcome to the {upperCaseTitle} Library</p>
<p>There are {bookCount} books in the library</p>
<button on:click="{changeName}">Change Library Name</button>

Here, we have an if statement as part of the $: prefix. In this case also, the change to the value of name triggers the reactive block. The block updates the bookCount which is used in the markup.

Important point to note here is only values in the $: prefix statement becomes dependencies of the reactive statement. In other words, only a change in name causes the block to be executed and not a change in bookCount.

Conclusion

With this, we have successfully learnt how to use Svelte Reactive Variables. We assigned a value to a variable and also wrote reactive statements.

If you have any comments or queries, please feel free to mention in the comments section below.