Context with stores in Svelte - Step-by-Step Execution

Concept Flow - Context with stores

Create a store

↓

Provide store in context

↓

Child component accesses context

↓

Child subscribes to store

↓

Child reacts to store updates

↓

UI updates automatically

This flow shows how a store is created, provided via context, accessed by a child, and updates UI reactively.

Execution Sample

Svelte

import { writable } from 'svelte/store';
import { setContext, getContext } from 'svelte';

const count = writable(0);
setContext('countStore', count);

// In child component
const count = getContext('countStore');
count.subscribe(value => console.log(value));

This code creates a writable store, sets it in context, and a child component gets it and subscribes to changes.

Execution Table

Step	Action	Store State	Context State	Child Subscription	Output
1	Create writable store count=0	0	empty	none	none
2	setContext('countStore', count)	0	countStore -> count(0)	none	none
3	Child calls getContext('countStore')	0	countStore -> count(0)	none	none
4	Child subscribes to count	0	countStore -> count(0)	subscribed	console logs 0
5	Update count.set(1)	1	countStore -> count(1)	subscribed	console logs 1
6	Update count.set(2)	2	countStore -> count(2)	subscribed	console logs 2
7	No more updates	2	countStore -> count(2)	subscribed	none

💡 No more updates; child subscribed and logged all changes.

Variable Tracker

Variable	Start	After Step 2	After Step 5	After Step 6	Final
count (store value)	0	0	1	2	2
context ('countStore')	empty	count(0)	count(1)	count(2)	count(2)
child subscription	none	none	subscribed	subscribed	subscribed

Key Moments - 3 Insights

Why does the child component get the latest store value immediately after subscribing?

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

What happens if the parent updates the store after the child subscribes?

The child automatically receives the new value and reacts, as seen in steps 5 and 6 where console logs show updated values.

Can the child component update the store obtained from context?

Yes, since the child has the store reference from context, it can call set or update methods on it to change the value.

Visual Quiz - 3 Questions

Look at the execution_table, what is the store value at Step 5?

A 2

B 0

C 1

D undefined

💡 Hint

Check the 'Store State' column at Step 5 in the execution_table.

At which step does the child first receive a value from the store?

A Step 3

B Step 4

C Step 5

D Step 2

💡 Hint

Look at the 'Output' column where console logs start.

If the parent never calls setContext, what happens when the child calls getContext?

A Child gets undefined and cannot subscribe

B Child creates a new store automatically

C Child subscribes to a default store with value 0

D Child throws an error

💡 Hint

Recall that context must be set before getContext returns a value.

Concept Snapshot

Context with stores in Svelte:
- Create a store with writable()
- Provide it using setContext(key, store)
- Child uses getContext(key) to access store
- Child subscribes to store for reactive updates
- UI updates automatically when store changes

Full Transcript

This visual execution shows how to share a Svelte store using context. First, a writable store is created with initial value 0. Then, the parent component sets this store in context with a key. The child component retrieves the store from context and subscribes to it. Upon subscription, the child immediately receives the current store value and logs it. When the parent updates the store value, the child automatically receives the new values and logs them. This demonstrates reactive data sharing between components using context and stores in Svelte.