Reactive declarations (let) in Svelte - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a reactive declaration in Svelte using let?

A reactive declaration in Svelte is a way to automatically update a variable when its dependencies change. It uses the $: label before a statement to make it reactive.

beginner

How do you write a reactive declaration that updates total when price or quantity changes?

You write: <br>$: total = price * quantity;<br>This means whenever price or quantity changes, total updates automatically.

intermediate

Can reactive declarations in Svelte run statements other than assignments?

Yes. Reactive declarations can run any statement, like function calls or console logs, as long as they start with $:. For example, $: console.log(count); runs whenever count changes.

beginner

What happens if you use a reactive declaration with a variable that does not change?

The reactive declaration runs once when the component initializes. If the variable never changes, it won't run again.

beginner

Why are reactive declarations useful in Svelte?

They let you write simple code that automatically updates values or runs code when data changes, without manually writing event handlers or watchers.

What symbol starts a reactive declaration in Svelte?

A $:

B #

C @

D !

Reactive declarations in Svelte always start with the $: label.

Which of these will update automatically when count changes?<br>1) $: double = count * 2;<br>2) let double = count * 2;

A Neither 1 nor 2

B Only 1

C Both 1 and 2

D Only 2

Only the reactive declaration with $: updates automatically when count changes.

Can you use reactive declarations to run a function when a variable changes?

A Only if the function returns a value

B No, reactive declarations only work with variable assignments

C Yes, by placing the function call after <code>$:</code>

D Only inside <code>onMount</code>

Reactive declarations can run any statement, including function calls, when dependencies change.

What happens if a reactive declaration depends on multiple variables?

A It updates only when the first variable changes

B It never updates automatically

C It updates only when all variables change simultaneously

D It updates when any of those variables change

Reactive declarations update whenever any of their dependent variables change.

Which is a correct reactive declaration to log count whenever it changes?

A $: console.log(count);

B let $: console.log(count);

C console.log($: count);

D log$: count;

The correct syntax is $: console.log(count); to reactively run code on count changes.

Explain how reactive declarations work in Svelte and give an example.

Think about how Svelte tracks variables and updates values automatically.

Describe a situation where using a reactive declaration is better than manually updating a variable.

Consider how reactive declarations reduce manual work and bugs.