Reactive statements ($:) in Svelte - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the $: symbol mean in Svelte?

It marks a reactive statement that runs automatically whenever its dependencies change.

beginner

How do reactive statements help in Svelte components?

They update values or run code automatically when related data changes, keeping the UI in sync without manual updates.

beginner

Given <code>let count = 0;</code> and <code>$: doubled = count * 2;</code>, what happens when <code>count</code> changes?

The variable doubled updates automatically to twice the new count value.

intermediate

Can you use multiple reactive statements in one Svelte component?

Yes, you can have many $: statements, each reacting to different variables or expressions.

intermediate

What happens if a reactive statement has no dependencies?

It runs once when the component initializes and never again, because nothing triggers it to rerun.

What triggers a reactive statement marked with $: to run in Svelte?

A When any variable it uses changes

B Only when the component mounts

C When the user clicks a button

D When the page reloads

Reactive statements run automatically whenever any variable they depend on changes.

Which of these is a correct reactive statement syntax in Svelte?

A let $: total = price * quantity;

B function $: total() { return price * quantity; }

C const $: total = price * quantity;

D $: total = price * quantity;

The correct syntax uses $: followed by the statement without extra keywords.

If you write $: console.log(count);, when will the message print?

A Every time <code>count</code> changes

B Only once when the component loads

C Never, because console.log is not reactive

D Only when a button is clicked

The reactive statement runs whenever count changes, so it logs each time.

Can reactive statements update other reactive statements in Svelte?

A No, they run independently

B Yes, reactive statements can chain updates

C Only if inside a function

D Only if declared in the same line

Reactive statements can depend on variables updated by other reactive statements, creating chains.

What happens if you write $: alert('Hello'); with no variables?

A Alert never shows

B Alert shows repeatedly causing a loop

C Alert shows once when component loads

D Syntax error

Without dependencies, the reactive statement runs once on initialization.

Explain how reactive statements ($:) work in Svelte and why they are useful.

Think about how Svelte updates values without you writing extra code.

Describe a simple example using a reactive statement to double a number when it changes.

Imagine you have a number and want another number always twice it.