Skip to main content

Svelte's reactivity is triggered by assignments. Methods that mutate arrays or objects will not trigger updates by themselves.

In this example, clicking the "Add a number" button calls the addNumber function, which appends a number to the array but doesn't trigger the recalculation of sum.

One way to fix that is to assign numbers to itself to tell the compiler it has changed:

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

You could also write this more concisely using the ES6 spread syntax:

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

The same rule applies to array methods such as pop, shift, and splice and to objects methods such as Map.set, Set.add, etc.

Assignments to properties of arrays and objects — e.g. += 1 or array[i] = x — work the same way as assignments to the values themselves.

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

However, indirect assignments to references such as this...

const foo =; = 'baz';


function quox(thing) { = 'baz';

...won't trigger reactivity on, unless you follow it up with obj = obj.

A simple rule of thumb: the updated variable must directly appear on the left hand side of the assignment.

We stand with Ukraine. Donate → We stand with Ukraine. Petition your leaders. Show your support.