Svelte $ symbol: Reactive Declaration

As I’m learning Svelte, and I’m reading examples, I’ve noticed the $ symbol being thrown around.

What does the $ symbol stand for in Svelte?

To my surprise, no answer on Google search.

What does the $ symbol stand for in Svelte?

The $ symbol in Svelte stands for Reactive declaration.

What is Reactive declaration?

Reactive declarations will automatically recompute logic that depends on state variables when Svelte state is updated.

Why do we need this?

Let’s take a look at this example:

<script>
  let firstName = "John";
  let lastName = "Doe";

  let fullName = firstName + " " + lastName;

  // List of first names
  const listOfFirstNames = ["Carita", "Serafina", "Sharie", "Lori"];

  // List of last names
  const listOfLastNames = ["Camacho", "Gabriel", "Brockman", "Moise"];

  const handleClick = () => {
    // Pick random first name & update firstName state variable
    firstName =
      listOfFirstNames[Math.floor(Math.random() * listOfFirstNames.length)];

    // Pick random last name & update lastName state variable
    lastName =
      listOfLastNames[Math.floor(Math.random() * listOfLastNames.length)];
  };
</script>

<h1>Hi my name is {fullName}</h1>
<button on:click={handleClick}>Generate new name</button>

The code above, shows a greeting message to the user, “Hi my name is {full_name}”.

<h1>Hi my name is {fullName}</h1>

And allows the user to generate a new random name by clicking on the button.

The problem with this code is the variable, fullName. When firstName, and lastName get updated inside handleClick(), it doesn’t update fullName.

So the user never sees the new generated name.

This is because Svelte does NOT re-render everything like React or Vue does.

Convert a variable to a reactive declaration

In the code example above, I declared a variable called, fullName with the let.

We’re going to change special keyword, let for the $ symbol. It should look like this.

$: fullName = firstName + " " + lastName;

This will let Svelte know that the variable fullName needs to get re-computed whenever the variable firtName or lastName gets updated.

Reactive statements

You’re not limited to just variables. You can also create reactive statements.

$: console.log(firstName + " " + lastName);

Every time firstName or lastName get their values updated, console.log() will print out the new name.

Group reactive statements

In the examples above, I’ve demonstrated how to do single reactive statements or variables.

The cool thing about this feature is that you can group them!

let firstName = "John";
let lastName = "Doe";

// Define variable outside of group first
let fullName;

$: {
  fullName = firstName + " " + lastName;
  console.log(firstName + " " + lastName);
};

By wrapping the curly braces ({}) you can add multiple code statements in there to be reactive.

Reactive if blocks

You may also have reactive conditionals!

$: if (fullName === 'Carita Brockman') {
  alert('Please change your name!')
}

In the example above, anytime the random name generator produces the name, Carita Brockman, Svelte will throw an alert() message.

I like to tweet about Svelte and post helpful code snippets. Follow me there if you would like some too!