How to use reactive statements in Svelte

What I’ll cover in this tutorial:

• What actually are reactive statements?
• Why they are so useful?
• Plenty of example use cases

What actually are reactive statements in Svelte?

Take the below snippet of code, this is a simple example of how you can use reactive statements. So what we’re doing here is assigning the string 'test' to value when the component is mounted using onMount. We're also logging the value using a console.log() in a reactive block, meaning the value will be logged to the console whenever the state value is reassigned. This is because the state value is a dependency of the reactive block. This means that reactive blocks will run based on their dependencies. The exact example below with the console.log is actually a very handy thing to do when debugging state; it's something I use all of the time.

What you’re probably wondering is how they work within Svelte? Well, Svelte uses JavaScript labels to declare blocks of code that can reactively run based on state dependencies. So anything after $: will be your reactive block, this could be a one-line assignment or a function call that returns something. Let’s go over some examples:

<script>
  import { onMount } from 'svelte'
  let value = ''
  $: console.log(value)
  onMount(() => {
    value = 'test'
  })
</script>

Why are reactive statements useful?

Reactive statements are useful for a number of cases. Firstly you can use them to declare variables based on the state in your component, such as something simple like below. The below takes two variables and will keep our declared reactive statement up to date by its dependencies, no matter how many times you reassign firstName and lastName.

<script>
  $: fullName = `${firstName} ${lastName}`
</script>

As you can probably guess reactivity is what makes this Svelte feature so powerful. You could have all of your form validation as a reactive statement, you could call functions based on if a value is set, and tons more. But one thing that I think should be discussed is that reactive statements can also be used to react to the global app state, meaning any store you have access to in your component can be read and used as a dependency within a reactive statement. I’ll put an example below:

<script>
  $: if ($store.foo && $store.foo.length) {
    // do something when this store value changes
  }
</script> 

Let’s go over a couple more simple cases where you may want to use reactive statements. First, you may have a function that returns a value, and you may want this function to be called every time some specific state updates in your component. Well, this is entirely possible, all you need to do is use a reactive declaration.

<input type="number" bind:value={a} />
<input type="number" bind:value={b} />
Your answer is {answer}
<script>
  let a
  let b
  $: answer = workoutSum(a, b)
  function workoutSum(a, b) {
    return a + b
  }
</script>

So in this example, a and b are our dependencies. So whenever these dependencies change, workoutSum will be called returning the sum of a + b, and assigning the value to answer.

Summary

For me, this feature is something that stands out from other frameworks. Vue has watch methods that can watch values, and I’m sure React also has something very similar. But Svelte just makes it nice, easy, and with minimal boilerplate. So if you’re currently looking into Svelte features, make sure you give this one a go!