Working with Reactive Statements in Svelte

Learn how to effectively use reactive statements in Svelte to listen for changes in component state and update other variables.

In Svelte, you can easily track changes in component state and update related variables. Let’s take an example of a count variable:

<script>
  let count = 0;
</script>

To update the count variable when a button is clicked, you can use the following code:

<script>
  let count = 0;

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

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

In order to listen for changes on the count variable, Svelte provides the special syntax $:. Using this syntax, you can define a block of code that Svelte will re-run whenever any referenced variable changes.

Here’s an example:

<script>
  let count = 0;

  const incrementCount = () => {
    count = count + 1;
  }

  $: console.log(`${count}`);
</script>

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

In this example, the block $: console.log(${count}); is listening for changes in the count variable and will execute whenever count changes. You can add multiple reactive statements together:

<script>
  $: console.log(`The count is ${count}`);
  $: console.log(`Double the count is ${count * 2}`);
</script>

You can also group multiple statements using a block:

<script>
  $: {
    console.log(`The count is ${count}`);
    console.log(`Double the count is ${count * 2}`);
  }
</script>

In the grouped block example, we still have two reactive statements, but they are contained within a block. This can be useful in cases where you have multiple related statements to execute.

It’s important to note that you’re not limited to console logging. You can update other variables inside the reactive statements as well:

<script>
  let count = 0;
  let double = 0;

  $: {
    console.log(`The count is ${count}`);
    double = count * 2;
    console.log(`Double the count is ${double}`);
  }
</script>

Now you’re equipped with the knowledge of using reactive statements effectively in Svelte. Harness the power of reactive programming to build dynamic and responsive applications!