Store contract (subscribe method) in Svelte - Step-by-Step Execution

Concept Flow - Store contract (subscribe method)

Create Store

↓

Call subscribe(callback)

↓

Add callback to subscribers list

↓

Immediately call callback with current value

↓

Return unsubscribe function

↓

When unsubscribe called -> Remove callback

↓

When store value changes -> Call all subscribers

This flow shows how subscribing to a Svelte store adds a callback, calls it immediately with the current value, and returns an unsubscribe function to stop updates.

Execution Sample

Svelte

import { writable } from 'svelte/store';
const count = writable(0);
const unsubscribe = count.subscribe(value => {
  console.log('Count:', value);
});
unsubscribe();

This code creates a writable store, subscribes to it logging the value, then unsubscribes to stop updates.

Execution Table

Step	Action	Subscribers List	Callback Called With	Return Value
1	Create writable store with initial value 0	[]	N/A	Store object
2	Call subscribe with callback	[(callback)]	0 (immediate call)	unsubscribe function
3	Store value changes to 1	[(callback)]	1 (callback called)	N/A
4	Call unsubscribe function	[]	N/A	N/A
5	Store value changes to 2	[]	No callback called	N/A

💡 No more subscribers after unsubscribe, so no callbacks called on value changes.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	After Step 5
subscribers	[]	[(callback)]	[(callback)]	[]	[]
store value	0	0	1	1	2

Key Moments - 3 Insights

Why is the callback called immediately when subscribing?

Because the subscribe method calls the callback right away with the current store value to give the subscriber the latest state (see execution_table step 2).

What happens if you don't call the unsubscribe function?

The callback stays in the subscribers list and will be called on every store value change, potentially causing memory leaks or unwanted updates (see execution_table steps 3 and 5).

Can multiple subscribers listen to the same store?

Yes, each subscribe call adds a callback to the subscribers list, all of which get called on value changes.

Visual Quiz - 3 Questions

Look at the execution table, what is the subscribers list after step 4?

A [(callback)]

B []

C [undefined]

D null

💡 Hint

Check the 'Subscribers List' column at step 4 in the execution_table.

At which step does the callback first get called with the value 1?

A Step 3

B Step 2

C Step 4

D Step 5

💡 Hint

Look at the 'Callback Called With' column in the execution_table.

If you never call unsubscribe, what happens when the store value changes to 2?

A Subscribers list becomes empty

B Callback is not called

C Callback is called with 2

D Store value resets to 0

💡 Hint

Refer to the 'Callback Called With' and 'Subscribers List' columns at step 5.

Concept Snapshot

Svelte store subscribe method:
- subscribe(callback) adds callback to subscribers
- Calls callback immediately with current value
- Returns unsubscribe function to remove callback
- On store value change, all subscribers are called
- Unsubscribe stops updates to that callback

Full Transcript

In Svelte, stores have a subscribe method that lets you listen for changes. When you subscribe, your callback is added to a list and called immediately with the current value. You get back an unsubscribe function to stop listening. When the store value changes, all subscribed callbacks run with the new value. If you unsubscribe, your callback is removed and won't be called anymore. This helps keep your app efficient and reactive.