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.

Practice

1. In Svelte, what is the main purpose of using setContext and getContext with stores?

easy

A. To create a new store that is only used inside one component

B. To handle HTTP requests inside components

C. To style components globally using CSS variables

D. To share reactive data easily between components without passing props through many layers

Solution

1. Step 1: Understand the role of setContext and getContext

   These functions allow sharing data between components without manually passing props down the tree.

2. Step 2: Recognize the benefit of using stores with context

   Stores provide reactive data, and context lets multiple components access the same store easily.

3. Final Answer:

   To share reactive data easily between components without passing props through many layers -> Option D

4. Quick Check:

   Context with stores = share reactive data [OK]

Hint: Context shares stores to avoid prop drilling [OK]

Common Mistakes:

• Thinking context creates new stores instead of sharing
• Confusing context with styling or HTTP handling
• Assuming context replaces all props

2. Which of the following is the correct way to provide a store via context in a Svelte parent component?

easy

A. import { getContext } from 'svelte'; getContext('key', store);

B. import { setContext } from 'svelte'; setContext('key', store);

C. import { setContext } from 'svelte'; setContext(store);

D. import { createContext } from 'svelte'; createContext('key', store);

Solution

1. Step 1: Recall the correct import and usage for setting context

   Use setContext from 'svelte' with a key and a value (store).

2. Step 2: Identify the correct syntax

   The correct call is setContext('key', store); to provide the store under a key.

3. Final Answer:

   import { setContext } from 'svelte'; setContext('key', store); -> Option B

4. Quick Check:

   setContext with key and store = import { setContext } from 'svelte'; setContext('key', store); [OK]

Hint: Use setContext with key and store in parent [OK]

Common Mistakes:

• Using getContext instead of setContext to provide
• Omitting the key argument in setContext
• Using non-existent createContext function

3. Given the following Svelte code, what will be logged to the console?

/* Parent.svelte */

medium

A. 5

B. undefined

C. Error: countStore not found

D. 0

Solution

1. Step 1: Understand the store creation and context setting

   The parent creates a writable store with initial value 5 and sets it in context under 'countStore'.

2. Step 2: Child retrieves the store and subscribes

   The child gets the store from context and subscribes to log its current value, which is 5.

3. Final Answer:

   5 -> Option A

4. Quick Check:

   Store initial value logged = 5 [OK]

Hint: Store initial value logs on subscribe [OK]

Common Mistakes:

• Expecting undefined if context key is wrong
• Confusing setContext and getContext usage
• Assuming subscription logs nothing initially

4. What is the error in this Svelte child component code that tries to get a store from context?

medium

A. Cannot subscribe to context value

B. Using getContext instead of setContext

C. Missing key argument in getContext call

D. Import statement is incorrect

Solution

1. Step 1: Check getContext usage

   getContext requires a key argument to retrieve the correct context value.

2. Step 2: Identify the missing key

   The code calls getContext() without any argument, causing an error.

3. Final Answer:

   Missing key argument in getContext call -> Option C

4. Quick Check:

   getContext needs key argument [OK]

Hint: Always pass key to getContext [OK]

Common Mistakes:

• Calling getContext without key
• Confusing getContext with setContext
• Assuming context value is not subscribable

5. You want to share a writable store with a default value of 0 across multiple nested components using context. Which approach correctly sets and uses this store so that updates in any child reflect everywhere?

hard

A. In parent: setContext('count', writable(0)); In children: const count = getContext('count'); Then use count.update() or count.set()

B. In parent: const count = writable(0); In children: import the store directly and use it

C. In parent: setContext('count', 0); In children: const count = getContext('count'); Then update count directly

D. In parent: setContext('count', writable(0)); In children: const count = getContext('count'); But children cannot update the store

Solution

1. Step 1: Provide a writable store via context in the parent

   Use setContext('count', writable(0)); to share a reactive store.

2. Step 2: Retrieve the store in children and update it

   Children get the store with getContext('count'); and can call update() or set() to change the value, reflecting everywhere.

3. Final Answer:

   In parent: setContext('count', writable(0)); In children: const count = getContext('count'); Then use count.update() or count.set() -> Option A

4. Quick Check:

   Writable store in context updates everywhere [OK]

Hint: Set writable store in context, children get and update it [OK]

Common Mistakes:

• Passing raw value instead of store in context
• Importing store directly instead of using context
• Assuming children cannot update shared store