Auto-subscription with $ prefix in Svelte - Step-by-Step Execution

Concept Flow - Auto-subscription with $ prefix

Declare store

↓

Use $ prefix in component

↓

Svelte auto-subscribes

↓

Component re-renders on store change

↓

Display updated value

This flow shows how Svelte auto-subscribes to a store when you use the $ prefix, updating the component automatically when the store changes.

Execution Sample

Svelte

import { writable } from 'svelte/store';
const count = writable(0);

// In component:
// <p>{$count}</p>
// count.set(1);

This code creates a writable store and uses the $ prefix to auto-subscribe and display its value in a Svelte component.

Execution Table

Step	Action	Store Value	Component $count Value	Component Rendered Output
1	Initialize count store with 0	0	0	<p>0</p>
2	Component uses $count to auto-subscribe	0	0	<p>0</p>
3	Call count.set(1)	1	1	<p>1</p>
4	Call count.set(5)	5	5	<p>5</p>
5	No further changes	5	5	<p>5</p>

💡 No more store updates; component stays rendered with last value.

Variable Tracker

Variable	Start	After 1	After 2	After 3	Final
count (store value)	0	0	1	5	5
$count (auto-subscribed value)	0	0	1	5	5

Key Moments - 2 Insights

Why does the component update automatically when count changes?

Because using $count tells Svelte to auto-subscribe to the store, so it re-renders the component whenever the store value changes, as shown in steps 3 and 4 of the execution_table.

What happens if we use count without the $ prefix in the component?

Without $, the component does not subscribe to the store and won't update automatically. The execution_table shows $count changing and triggering re-renders, which won't happen without $.

Visual Quiz - 3 Questions

Look at the execution_table at step 3. What is the component's rendered output?

A <p>1</p>

B <p>0</p>

C <p>5</p>

D <p>undefined</p>

💡 Hint

Check the 'Component Rendered Output' column at step 3 in the execution_table.

At which step does the store value first change from its initial value?

A Step 1

B Step 3

C Step 2

D Step 4

💡 Hint

Look at the 'Store Value' column in the execution_table to see when it changes from 0.

If we remove the $ prefix in the component, how would the 'Component Rendered Output' change after step 3?

A It would show an error

B It would still update to <p>1</p>

C It would stay at <p>0</p> and not update

D It would display <p>undefined</p>

💡 Hint

Refer to the key_moments section explaining the role of $ prefix for auto-subscription.

Concept Snapshot

Auto-subscription with $ prefix in Svelte:
- Declare a store (e.g., writable(0))
- Use $storeName in component to auto-subscribe
- Component re-renders automatically on store changes
- No manual subscription or unsubscribe needed
- Simplifies reactive UI updates

Full Transcript

In Svelte, when you create a store like 'count' using writable, you can use the $ prefix inside your component to auto-subscribe to that store. This means the component automatically listens for changes in the store's value. When you update the store using count.set(newValue), the component sees the new value through $count and re-renders to show the updated value. This process removes the need to manually subscribe or unsubscribe from the store, making your code cleaner and reactive. The execution table shows the store starting at 0, then changing to 1 and 5, with the component updating its displayed value accordingly.

Practice

1. What does the $ prefix do when used with a Svelte store inside a component?

easy

A. It automatically subscribes to the store and updates the value reactively.

B. It creates a new store with the same value.

C. It unsubscribes from the store to stop updates.

D. It converts the store value to a string.

Solution

1. Step 1: Understand the role of the $ prefix

   The $ prefix in Svelte is used to auto-subscribe to a store and unwrap its current value.

2. Step 2: Recognize reactive updates

   Using $store makes the component update automatically when the store value changes, without manual subscription.

3. Final Answer:

   It automatically subscribes to the store and updates the value reactively. -> Option A

4. Quick Check:

   Auto-subscription = It automatically subscribes to the store and updates the value reactively. [OK]

Hint: Remember: $ means auto-subscribe and unwrap store value [OK]

Common Mistakes:

• Thinking $ creates a new store
• Believing $ unsubscribes from the store
• Assuming $ converts value to string

2. Which of the following is the correct syntax to use the $ prefix with a Svelte store named count inside a component?

easy

A. let value = count.$;

B. let value = count$;

C. let value = $count;

D. let value = $count();

Solution

1. Step 1: Identify correct $ prefix usage

   The $ prefix is placed directly before the store variable name to unwrap its value, like $count.

2. Step 2: Check syntax correctness

   let value = $count; uses let value = $count; which is valid syntax to get the current store value reactively.

3. Final Answer:

   let value = $count; -> Option C

4. Quick Check:

   Correct $ prefix syntax = let value = $count; [OK]

Hint: Place $ directly before store name, no parentheses [OK]

Common Mistakes:

• Putting $ after the store name
• Using $ as a method call
• Adding dot before $

3. Given the following Svelte code snippet, what will be displayed when the button is clicked twice?

  
   count.update(n => n + 1)}>Increment
  
Count: {$count}

medium

A. Count: undefined

B. Count: 1

C. Count: 0

D. Count: 2

Solution

1. Step 1: Understand the initial state and update

   The store count starts at 0. Each button click increases it by 1 using count.update(n => n + 1).

2. Step 2: Calculate value after two clicks

   After two clicks, the value increments twice: 0 + 1 + 1 = 2. The {$count} auto-subscribes and shows the current value.

3. Final Answer:

   Count: 2 -> Option D

4. Quick Check:

   2 increments = Count: 2 [OK]

Hint: Each click adds 1; $count shows current value [OK]

Common Mistakes:

• Forgetting the store updates on click
• Thinking $count is static
• Assuming initial value stays

4. What is the error in the following Svelte code using the $ prefix?

  
  
Hello, {currentName}!
   name.set('Bob')}>Change Name

medium

A. The store name cannot be updated with set.

B. The variable currentName should use $name to auto-subscribe.

C. The on:click event is missing parentheses.

D. The import statement is incorrect.

Solution

1. Step 1: Identify how to access store value reactively

   The variable currentName is assigned the store itself, not its value. To get the current value reactively, it should be let currentName = $name;.

2. Step 2: Understand the effect on UI

   Without $, currentName is the store object, so the UI shows it incorrectly and does not update on changes.

3. Final Answer:

   The variable currentName should use $name to auto-subscribe. -> Option B

4. Quick Check:

   Use $ to unwrap store value = The variable currentName should use $name to auto-subscribe. [OK]

Hint: Use $ prefix to unwrap store value for reactive variables [OK]

Common Mistakes:

• Assigning store object instead of its value
• Forgetting $ prefix for reactive updates
• Misunderstanding store.set usage

5. You have two writable stores in Svelte: countA and countB. You want to display their sum reactively in a component. Which is the correct way to do this using the $ prefix?

  
  
  
Sum: ???

hard

A. <p>Sum: {$countA + $countB}</p>

B. <p>Sum: {countA + countB}</p>

C. <p>Sum: {$countA + countB}</p>

D. <p>Sum: {countA.get() + countB.get()}</p>

Solution

1. Step 1: Understand how to unwrap multiple stores

   Using $countA and $countB unwraps their current values reactively.

2. Step 2: Combine unwrapped values in expression

   Adding $countA + $countB inside curly braces calculates the sum reactively and updates UI on changes.

3. Final Answer:

   <p>Sum: {$countA + $countB}</p> -> Option A

4. Quick Check:

   Use $ on both stores to sum reactively = <p>Sum: {$countA + $countB}</p> [OK]

Hint: Use $ on each store to unwrap before adding [OK]

Common Mistakes:

• Adding store objects instead of values
• Mixing $ prefix on only one store
• Using .get() which is not a Svelte store method