Skip to content

Handling State Updates in Svelte

How to use reactive assignments in Svelte to work with state updates within a component

One great thing about Svelte is that you don't need to do anything special to update the state of a component.

All you need is an assignment.

Say you have a count variable. You can increment that using, simply, count = count + 1, or count++:

<script>
let count = 0

const incrementCount = () => {
	count++
}
</script>

{count} <button on:click={incrementCount}>+1</button>

This is nothing groundbreaking if you are unfamiliar with how modern Web frameworks handle state, but in React you'd have to either call this.setState(), or use the useState() hook.

Vue takes a more structured approach using classes and the data property.

Having used both, I find Svelte to be a much more JavaScript-like syntax.

We need to be aware of one thing, which is learned pretty quickly: we must also do an assignment when changing the value.

For simple values like strings and numbers, that's mostly a given, because all methods on String return new strings, and same for numbers - they are immutable.

But for arrays? We can't use methods that alter the array. Like push(), pop(), shift(), splice()... because there's no assignment. They change the inner data structure, but Svelte can't detect that.

Well, you can still use them, but after you've done your operation, you reassign the variable to itself, like this:

let list = [1, 2, 3]
list.push(4)
list = list

Which is a bit counter-intuitive, but you'll quickly remember it.

Or you can use use the spread operator to perform operations:

let list = [1, 2, 3]
list = [...list, 4]
→ Download my free Svelte Handbook!

THE VALLEY OF CODE

THE WEB DEVELOPER's MANUAL

You might be interested in those things I do:

  • Learn to code in THE VALLEY OF CODE, your your web development manual
  • Find a ton of Web Development projects to learn modern tech stacks in practice in THE VALLEY OF CODE PRO
  • I wrote 16 books for beginner software developers, DOWNLOAD THEM NOW
  • Every year I organize a hands-on cohort course coding BOOTCAMP to teach you how to build a complex, modern Web Application in practice (next edition February-March-April-May 2024)
  • Learn how to start a solopreneur business on the Internet with SOLO LAB (next edition in 2024)
  • Find me on X

Related posts that talk about svelte: