Reactive assignments trigger updates in Svelte - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does a reactive assignment in Svelte do?

A reactive assignment automatically updates the related parts of the UI when the variables it depends on change.

beginner

How do you write a reactive assignment in Svelte?

Use the $: label before an assignment, like $: doubled = count * 2;.

beginner

Why are reactive assignments useful in Svelte?

They keep the UI in sync with data changes without manually updating the DOM or writing extra code.

intermediate

What happens if you assign a reactive variable inside a reactive statement in Svelte?

The reactive statement runs again whenever the variables it depends on change, triggering updates automatically.

advanced

Can reactive assignments cause infinite loops? How to avoid them?

Yes, if a reactive assignment updates a variable it depends on. Avoid by not creating circular dependencies.

What symbol starts a reactive assignment in Svelte?

A &

B $:

C @

D #

Reactive assignments in Svelte start with the $: label.

When does a reactive assignment update in Svelte?

A When the variables it depends on change

B Only when the page reloads

C When the user clicks a button

D Never automatically

Reactive assignments update automatically whenever the variables they depend on change.

Which of these is a correct reactive assignment?

A total = $: price + tax;

B let $total = price + tax;

C total := price + tax;

D $: total = price + tax;

The correct syntax uses $: before the assignment.

What can cause a reactive assignment to run repeatedly in a loop?

A Assigning a variable that triggers itself

B Using <code>$:</code> once

C Not using reactive assignments

D Using let instead of const

Assigning a variable inside a reactive statement that depends on itself can cause infinite loops.

What is the main benefit of reactive assignments in Svelte?

A They make the code run slower

B They require manual DOM updates

C They keep UI and data in sync automatically

D They disable reactivity

Reactive assignments keep the UI updated automatically when data changes.

Explain how reactive assignments work in Svelte and why they are useful.

Think about how Svelte tracks dependencies and updates the UI.

Describe a situation where a reactive assignment could cause an infinite loop and how to prevent it.

Consider what happens if a reactive statement changes a variable it watches.