What are reactive statements in Svelte and why are they useful?

What I’ll cover in this tutorial

• What actaully are reactive statements?
• Why they are so useful?
• Plently example use cases

What actaully 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 of 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 its dependencies. The exact example below with the console.log is actaully a very handy thing to do when debugging state, its 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 reactivly run based on state dependencies. So anything after $: will be your reactive block, this could be a one line assignment or a function call which 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 use cases. Firstly you can use them to declare variables based on 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 global app state, meaning any store you have access to in your component and be read and reacted to within a reactive statement. I’ll put a 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 which returns a value, and you may want this function to be called everytime 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 our are 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 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 make it nice, easy and with minimal boilerplate. So if you’re currently looking into Svelte features, make sure you give this one a go.