Writable stores in Svelte - Step-by-Step Execution

Concept Flow - Writable stores

Create writable store

↓

Subscribe to store

↓

Read current value

↓

Update store value

↓

Notify subscribers

↓

Subscribers react to new value

This flow shows how a writable store is created, subscribed to, updated, and how subscribers get notified with the new value.

Execution Sample

Svelte

import { writable } from 'svelte/store';

const count = writable(0);

count.subscribe(value => console.log('Count:', value));

count.set(1);
count.update(n => n + 1);

This code creates a writable store, subscribes to it to log changes, then sets and updates the store value.

Execution Table

Step	Action	Store Value Before	Store Value After	Subscribers Notified	Output
1	Create writable store with initial value 0	N/A	0	No
2	Subscribe to store	0	0	Yes	Count: 0
3	Set store value to 1	0	1	Yes	Count: 1
4	Update store value by adding 1	1	2	Yes	Count: 2
5	No more actions	2	2	No

💡 No more updates; store value remains 2 and subscribers have latest value.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4	Final
count	undefined	0	0	1	2	2

Key Moments - 3 Insights

Why do subscribers get the initial value immediately after subscribing?

Because in step 2, subscribing calls the subscriber function right away with the current store value (0), as shown in the output 'Count: 0'.

What is the difference between set() and update() methods?

set() replaces the store value directly (step 3), while update() takes a function to compute the new value from the old one (step 4), as seen in the store value changes.

Why does the subscriber get notified after every change?

Because writable stores notify all subscribers whenever the value changes, triggering the subscriber callback each time (steps 3 and 4 outputs).

Visual Quiz - 3 Questions

Look at the execution table, what is the store value right after subscribing at step 2?

A 1

B 0

C undefined

D 2

💡 Hint

Check the 'Store Value After' column at step 2 in the execution table.

At which step does the store value become 2?

A Step 4

B Step 2

C Step 3

D Step 5

💡 Hint

Look at the 'Store Value After' column for each step in the execution table.

If we remove the subscribe call, what will happen to the output?

A Store value will not update

B Output will still log all changes

C No output will be logged

D Subscribers will be notified but no output

💡 Hint

Refer to the execution table rows where output is logged only after subscribing.

Concept Snapshot

Writable stores in Svelte:
- Created with writable(initialValue)
- Subscribe to get updates immediately and on changes
- Use set(value) to replace value
- Use update(fn) to change value based on current
- Subscribers run callback on every change

Full Transcript

Writable stores in Svelte let you hold a value that can change over time. You create one with writable and give it a starting value. When you subscribe, your function runs right away with the current value. When you call set, the store value changes and subscribers get notified. Update lets you change the value based on the old one. This way, your app reacts automatically to changes in the store.