Why stores manage shared state in Svelte - Visual Breakdown

Concept Flow - Why stores manage shared state

Component A reads state

↓

Component B reads state

↓

Store holds shared state

↓

Component A updates state

↓

Store updates value

↓

Component B reacts to update

↓

UI stays in sync

Components read and update a shared store, which keeps the state consistent and syncs all components automatically.

Execution Sample

Svelte

import { writable } from 'svelte/store';

const count = writable(0);

// Component B
count.subscribe(value => console.log(value));

// Component A
count.set(1);

Two components share a count store; one sets it, the other logs updates automatically.

Execution Table

Step	Action	Store Value Before	Store Value After	Component Reaction
1	Create store with initial value	N/A	0	No reaction yet
2	Component B subscribes to store	0	0	Logs 0 immediately
3	Component A sets store to 1	0	1	Component B logs 1
4	Component A sets store to 5	1	5	Component B logs 5
5	Component B unsubscribes	5	5	No further logs
6	Component A sets store to 10	5	10	No reaction, B unsubscribed

💡 Component B unsubscribed, so no reaction to further store changes.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	After Step 5	After Step 6
count	0	0	1	5	5	10

Key Moments - 3 Insights

Why does Component B log the initial value immediately after subscribing?

Because Svelte stores call subscribers immediately with the current value, as shown in step 2 of the execution_table.

What happens if a component unsubscribes from the store?

It stops receiving updates, so no reaction occurs after unsubscription, as seen in steps 5 and 6.

Why do both components share the same state?

Because they use the same store instance, which holds the single source of truth for the shared state.

Visual Quiz - 3 Questions

Look at the execution_table, what value does Component B log at step 3?

A 1

B 0

C 5

D 10

💡 Hint

Check the 'Component Reaction' column at step 3 in the execution_table.

At which step does Component B stop reacting to store changes?

A Step 3

B Step 4

C Step 5

D Step 6

💡 Hint

Look for when the 'Component Reaction' says no further logs in the execution_table.

If Component A never called set(), what would Component B log after subscribing?

A Nothing

B 0

C undefined

D Error

💡 Hint

Refer to step 2 where subscription logs the current store value immediately.

Concept Snapshot

Svelte stores hold shared state.
Components subscribe to stores to get updates.
Updating the store notifies all subscribers.
Unsubscribing stops updates.
Stores keep UI in sync automatically.

Full Transcript

In Svelte, stores manage shared state by holding a single value that multiple components can read and update. When a component subscribes to a store, it immediately receives the current value. If any component updates the store, all subscribed components react to the change, keeping the UI consistent. If a component unsubscribes, it stops receiving updates. This shared store approach avoids state conflicts and keeps components synchronized.