Svelte – Reactive variables and statements ($:)

Variable assignment in Svelte is reactive in nature. It means if the new value is assigned to a variable then the change will be immediately reflected to the UI. But if a variable is dependent on the value of another variable then depending variable won’t work reactively. For that we need to use $: notation.

Code Examples

Let’s first see how a simple variable acts as reactive –

<script>
 var count = 1

 function increaseCount(){
   count += 1;
 }
</script>

<p>Count = {count}</p>
<button on:click={increaseCount}>Increase Count</button>

On the click of button, count will be assigned a new value equals to the count+1. This triggers a re-render of component and UI will get updated with new value.

What if the value of count is used in another variable doubleCount which is equals to the double of the value of count. Will the update in count also update doubleCount? The answer is No.

<script>
 var count = 1
 var doubleCount = count * 2

 function increaseCount(){
   count += 1;
 }
</script>

<p>Count = {count}</p>
<p>Double Count = {doubleCount}</p>
<button on:click={increaseCount}>Increase Count</button>

Here on clicking the button, the value of count will increase and gets updated on UI but doubleCount will keep showing it’s initial value of 2.

To deal with this problem, Svelte provided $:. Any statement after this, will re-run with the change in any variable used within that statement.

Let’s check it out with an example –

<script>
  var count = 1;
  var anotherCount = 2;
  var blockVariable = 0;

  // Using count variable in
  // another variable using $:
  $: doubleCount = count * 2;

  // We can use count as many times
  // as we want
  $: tripleCount = count * 3;

  // We can also use $: declared variable
  // in another $: variable
  $: usingDoubleCount = doubleCount * 2;

  // We can also declare a function in $:
  // This will get updated when count changes
  $: usingFunction = () => {
    return count * 10;
  };

  // We can use more than one variable
  // This will update with either count
  // or anotherCount
  $: usingFunctionAgain = () => {
    return count * 10 + anotherCount;
  };

  // Storing only returned value of function
  // Will ONLY update with change in count
  // It won't update with anotherCount
  // Because the $: statement has count only
  $: returnFunctionValue = someFunction(count);

  // You can also create a block of statements
  // Here we are running a condition to change
  // value of blockVariable. This will run only
  // when count changes
  $: {
      if(count % 2){
        blockVariable = 1
      } else {
        blockVariable = 0
      }
  }

  function increaseCount() {
    count += 1;
  }

  function increaseAnotherCount() {
    anotherCount += 1;
  }

  function someFunction(count) {
    return count + anotherCount;
  }
</script>

<p>Count = {count}</p>
<p>Double Count = {doubleCount}</p>
<p>Triple Count = {tripleCount}</p>
<p>Using doubleCount = {usingDoubleCount}</p>
<p>Using function = {usingFunction()}</p>
<p>
  Using function with both variables 
  = {usingFunctionAgain()}
</p>
<p>
  Function returning value = 
  {returnFunctionValue}
</p>
<p>
 Block Variable = {blockVariable}
</p>


<button on:click={increaseCount}>
  Increase Count
</button>
<button on:click={increaseAnotherCount}>
  Increase Another Count
</button>

In this example, we have covered many cases like –

1. Using variable in $: variable.
2. Using $: variable in another $: variable.
3. Using function as $: variable.
4. Using $: function with multiple reactive variables.
5. Storing return value of function into $: variable.
6. Running block of statements using $:.

    Tweet this to help others

Live Demo