Svelte automatically updates the DOM when your component's state changes. Often, some parts of a component's state need to be computed from other parts (such as a fullname derived from a firstname and a lastname), and recomputed whenever they change.
For these, we have reactive declarations. They look like this:
let count = 0;
$: doubled = count * 2;If a reactive statement consists entirely of an assignment to an undeclared variable, Svelte will inject a let declaration on your behalf.
Don't worry if this looks a little alien. It's valid (if unconventional) JavaScript, which Svelte interprets to mean 're-run this code whenever any of the referenced values change'. Once you get used to it, there's no going back.
Let's use doubled in our markup:
<button>...</button>
<p>{count} doubled is {doubled}</p>Of course, you could just write {count * 2} in the markup instead — you don't have to use reactive values. Reactive values become particularly valuable (no pun intended) when you need to reference them multiple times, or you have values that depend on other reactive values.
Note that reactive declarations and statements will run after other script code and before component markup is rendered.