Reactive blocks for side effects in Svelte - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a reactive block in Svelte?

A reactive block in Svelte is a special code section that runs automatically whenever the variables it depends on change. It is used to perform side effects or update values reactively.

beginner

How do you write a reactive block in Svelte?

You write a reactive block using the $: label followed by a block of code inside curly braces. For example: $: { console.log(count); } runs whenever count changes.

intermediate

Why use reactive blocks for side effects in Svelte?

Reactive blocks let you run code automatically when data changes, like updating the DOM, logging, or fetching data. This keeps your code simple and avoids manual event handling.

intermediate

Can reactive blocks depend on multiple variables?

Yes, reactive blocks run whenever any variable they use changes. You can use multiple variables inside the block, and Svelte tracks all dependencies automatically.

advanced

What happens if a reactive block updates a variable it depends on?

If a reactive block updates a variable it depends on, it can cause the block to run again, potentially creating an infinite loop. You should avoid such patterns or add conditions to stop looping.

How do you start a reactive block in Svelte?

A $:

B reactive()

C useEffect()

D onMount()

Reactive blocks in Svelte start with the $: label.

When does a reactive block run?

A Whenever any variable inside it changes

B Only once when the component loads

C When the user clicks a button

D Only when explicitly called

Reactive blocks run automatically whenever any variable they use changes.

Which of these is a good use for a reactive block?

A Writing HTML markup

B Styling elements with CSS

C Defining component props

D Fetching data when a variable changes

Reactive blocks are great for side effects like fetching data when variables change.

What risk should you watch for when updating variables inside a reactive block?

A Memory leaks

B Infinite loops

C Syntax errors

D Slow rendering

Updating a variable inside a reactive block that depends on it can cause infinite loops.

Can reactive blocks access variables declared outside them?

A No, only inside variables

B Only if passed as props

C Yes, and they track changes automatically

D Only if declared as constants

Reactive blocks can use any variables in scope and track their changes automatically.

Explain how reactive blocks help manage side effects in Svelte components.

Think about how Svelte tracks variables and runs code when they update.

Describe a potential problem when a reactive block updates a variable it depends on and how to avoid it.

Consider what happens if the block triggers itself continuously.