The Correct Way to Update Arrays in Svelte

In this post, we will learn about the correct way to update arrays in Svelte.

In Svelte, the variables are updated reactively. Basically, when we change the value of a certain variable, Svelte automatically updates the DOM. However, the same approach does not work in the case of arrays.

If you want a detailed discussion on reactivity, you can refer to this post on Svelte Reactive Variables. In this post, we will do a recap of the same.

1 – Svelte Reactive Variables

Let us take a simple example to understand what reactivity in Svelte actually means.

See below snippet.

<script>
    let counter = 0;

    function incrementNumber() {
        counter = counter + 1
    }
    
</script>

<h1>Welcome to the Incrementer</h1>
<h3>Counter Value: {counter}</h3>
<button on:click={incrementNumber}>
	Increment
</button>

As you can see, we update the counter variable when the user clicks the Increment button. After every click, the counter is incremented. Also, Svelte updates the DOM to reflect the new value of the counter.

This is reactivity in a nutshell.

2 – Svelte Array Update Issue

Reactive variables work fine in Svelte. However, it’s not the same situation with arrays.

Let’s take an example to understand.

<script>
    let numbers = [1, 2, 3];

    function addNumber() {
        numbers.push(numbers.length + 1);
    }

    $: total = numbers.reduce((i, j) => i + j, 0);
    
</script>

<h1>Welcome to the Incrementer</h1>
<h3>{numbers.join(' + ')} = {total}</h3>

<button on:click={addNumber}>
	Add another number
</button>

Here, we create an array with name numbers. It has few initial values. Also, we have a reactive statement using $. This statement basically adds all the numbers in the array. We display both the array and total in the DOM.

If we run the application and click the button to Add another number, nothing happens to the h3 DOM node. Our expectation was to have the updated array and total be displayed.

However, Svelte is not able to register the update. The reason for this is that Svelte’s reactivity is triggered by assignment. In other words, when the actual value of a variable changes, Svelte updates the DOM. However, with arrays, the variable merely points to the memory location where the array is actually stored. In other words, it is just a reference to the array. The push function updates the array but not the reference. Therefore, Svelte also does not update the DOM. The same behaviour is also applicable with objects.

3 – Update Arrays in Svelte

So, what is the correct way to update arrays in Svelte?

Svelte uses assignments to trigger the reactivity. Therefore, if we actually assign the modified array to the existing array, it should do the trick.

See below example:

<script>
    let numbers = [1, 2, 3];

    function addNumber() {
        numbers = [...numbers, numbers.length + 1];
    }

    $: total = numbers.reduce((i, j) => i + j, 0);
    
</script>

<h1>Welcome to the Incrementer</h1>
<h3>{numbers.join(' + ')} = {total}</h3>

<button on:click={addNumber}>
	Add another number
</button>

Here, we use Javascript spread syntax to update the numbers array with the new set of values.

Now, if we click the button, Svelte will be able to recognize the update. It will also trigger the statement with the $ prefix. The DOM will show the new values.

Conclusion

With this, we have successfully learnt the correct way to update arrays in Svelte by using assignment.

If you have any comments or queries about this post, please write them in the comments section below.