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!