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.