Reactive Values
this is something we want to compute every time component mounts
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.
<script>
// reactive declaration
$: foo = bar;
// reactive statement
$: {
something = somethingElse;
}
</script>
Very interesting Concept in svelte
Declaration
reactive declaration is a variable which is dependent on other variables
every time the value of declaration will be computed and changed when count is changed
<script>
let count = 0;
$: doubled = count * 2;
</script>
doubled is reactive variable
when ever count changes , svelte will compute the value of doubled
reactive declartions can also depend on other reactive variables
$: quadrupled = doubled * 2
Reactive Statements
- its a block which re-runs when dependency changes
<script>
let count = 0;
let prevCount = 0;
let countWentUp = false;
// Simple statement
$: console.log('Count is' + count);
// Block statement
$: {
countWentUp = prevCount < count;
prevCount = count;
}
</script>
Order of execution of reactive statements
<script>
let count = 0;
$: quadrupled = doubled * 2; // runs 2nd
$: doubled = count * 2; // runs 1st
$: console.log(quadrupled); // runs 3rd
$: console.log(count); // runs last
</script>
order depends on variables and dependencies
if there's no dep then it will execute as we have written
in above example, which statement directly depends on count ?
its doubled so it will run first, doubled is dep in quadrupled and so on
<script>
let count = 0;
let multiplyBy = 2;
$: multiplied = multiply(count);
function multiply(value) {
return value * multiplyBy;
}
</script>
one more intersting usecase
the order depends on direct dependencies
like in multiplied statement we have direct dep count , so it will only run when there is change in count but also we have multiplyBy dependency in function , yes we have , but again it wont effect the reactive statement
by chance we want to run our reactive statement when we have any change in multiplyBy
for that we can write it like this
<script>
// ...
$: variableWhichShouldTriggerRecalculation, retriggerCalculation();
// ...
</script>
Reactive statements runs only once for performance and saving us from endless loops
when to use reactive statements and declarations ? when we want to run something on every state change, when there is related dependency
and remembers -> declarations means declaring something ($ a = b)
statement means (console.log())
here this blog ends -> svelte is awesome -> a great tool to explore
https://learn.svelte.dev/tutorial/reactive-declarations