Context API vs stores in Svelte - Visual Side-by-Side Comparison

Concept Flow - Context API vs stores

Create Store

↓

Subscribe Components

↓

Update Store Value

↓

All Subscribers React

↓

Create Context

↓

Provide Context Value

↓

Consume Context in Descendants

↓

Descendants React to Changes

Shows how stores hold shared state and notify subscribers, while Context API passes data down the component tree for descendants to consume.

Execution Sample

Svelte

// Store example
import { writable } from 'svelte/store';
const count = writable(0);

// Context example
import { setContext, getContext } from 'svelte';
setContext('key', 'value');
const val = getContext('key');

This code creates a store with a number and sets a context value, showing two ways to share data in Svelte.

Execution Table

Step	Action	Store Value	Context Value	Effect on Components
1	Create store with initial value 0	0	undefined	No components subscribed yet
2	Subscribe component A to store	0	undefined	Component A will react to store changes
3	Update store value to 1	1	undefined	Component A re-renders with new value 1
4	Set context key 'key' to 'value'	1	'value'	Descendant components can access context
5	Component B calls getContext('key')	1	'value'	Component B receives 'value' from context
6	Update store value to 2	2	'value'	Component A re-renders with new value 2; context unchanged
7	No context update	2	'value'	Context consumers see same value unless context changes
8	End of trace	2	'value'	Store and context values stable

💡 Execution stops after store and context values stabilize with subscribers updated.

Variable Tracker

Variable	Start	After 1	After 2	After 3	After 4	Final
store (count)	0	0	0	1	2	2
context ('key')	undefined	undefined	undefined	undefined	'value'	'value'

Key Moments - 2 Insights

Why does updating the store value cause components to re-render but changing context requires explicit setContext?

Stores are reactive and notify subscribers automatically on update (see steps 3 and 6 in execution_table). Context values must be set explicitly with setContext (step 4) and only descendants that call getContext receive the value.

Can components outside the context provider access the context value?

No, only components inside the provider tree that call getContext with the matching key receive the context value (step 5). Stores can be imported anywhere and subscribed to globally.

Visual Quiz - 3 Questions

Look at the execution table, what is the store value at step 3?

A undefined

B 0

C 1

D 2

💡 Hint

Check the 'Store Value' column at step 3 in the execution_table.

At which step does the context value get set?

A Step 4

B Step 2

C Step 6

D Step 1

💡 Hint

Look for 'Set context key' action in the execution_table.

If the store value was never updated, what would happen to component A's rendering?

A It would re-render only when context changes

B It would never re-render after subscription

C It would re-render every step

D It would throw an error

💡 Hint

Refer to steps 2 and 3 in execution_table and variable_tracker for store updates.

Concept Snapshot

Svelte stores hold reactive shared state and notify all subscribers on change.
Context API passes data down the component tree for descendants to consume.
Stores can be imported and subscribed anywhere; context is scoped to descendants.
Update stores with set() or update(); setContext and getContext manage context.
Use stores for global reactive state; use context for passing data deeply without props.

Full Transcript

This visual trace compares Svelte's Context API and stores for sharing data. Stores are created with writable() and hold reactive values. Components subscribe to stores and re-render automatically when the store updates. Context API uses setContext to provide a value to descendant components, which access it with getContext. The execution table shows steps creating a store, subscribing components, updating values, setting context, and consuming context. Variable tracking shows store and context values changing over time. Key moments clarify that stores notify subscribers automatically, while context requires explicit provision and is scoped to descendants. The quiz tests understanding of store updates, context setting, and component re-rendering behavior. The snapshot summarizes when to use stores versus context in Svelte.

Practice

1. Which statement best describes the main difference between Svelte's Context API and stores?

easy

A. Context API is used for styling components, stores manage component lifecycle.

B. Stores are only for passing data from parent to child, Context API is for global state.

C. Context API shares data only between parent and child components, while stores provide global reactive state accessible anywhere.

D. Stores and Context API are identical in functionality and usage.

Solution

1. Step 1: Understand Context API scope

   Context API shares data only between parent and its children components, not globally.

2. Step 2: Understand stores scope

   Stores provide reactive global state accessible from any component in the app.

3. Final Answer:

   Context API shares data only between parent and child components, while stores provide global reactive state accessible anywhere. -> Option C

4. Quick Check:

   Context API = parent-child, stores = global state [OK]

Hint: Context API is local parent-child, stores are global [OK]

Common Mistakes:

• Thinking stores only pass data down like props
• Confusing Context API with global state management
• Assuming stores are for styling or lifecycle

2. Which of the following is the correct way to set a value in a Svelte writable store?

easy

A. store.set(newValue);

B. store.value = newValue;

C. store.update(newValue);

D. store.change(newValue);

Solution

1. Step 1: Recall writable store methods

   Svelte writable stores have a set() method to assign a new value.

2. Step 2: Check other options

   store.value is not valid, update() takes a function, change() does not exist.

3. Final Answer:

   store.set(newValue); -> Option A

4. Quick Check:

   Use set() to assign store value [OK]

Hint: Use store.set(value) to update writable stores [OK]

Common Mistakes:

• Trying to assign store.value directly
• Using update() with a value instead of a function
• Using non-existent methods like change()

3. Given this Svelte code using Context API:

import { setContext, getContext } from 'svelte';

// Parent.svelte
setContext('color', 'blue');

// Child.svelte
const color = getContext('color');

What will color be inside Child.svelte?

medium

A. Throws an error

B. undefined

C. null

D. 'blue'

Solution

1. Step 1: Understand setContext and getContext

   setContext('color', 'blue') sets a value accessible to child components via getContext('color').

2. Step 2: Check child access

   Child.svelte calls getContext('color') and receives 'blue' because it is a child of the parent setting the context.

3. Final Answer:

   'blue' -> Option D

4. Quick Check:

   Context API passes 'blue' from parent to child [OK]

Hint: getContext returns parent's setContext value [OK]

Common Mistakes:

• Expecting undefined if not wrapped properly
• Confusing context keys or forgetting to setContext
• Assuming context works globally like stores

4. What is wrong with this Svelte store usage?

import { writable } from 'svelte/store';

const count = writable(0);

function increment() {
  count = count + 1;
}

medium

A. writable stores cannot hold numbers.

B. You cannot reassign the store variable; must use count.update() or count.set().

C. The import statement is incorrect.

D. The function increment should be async.

Solution

1. Step 1: Identify store usage error

   The code tries to do count = count + 1, which reassigns the store variable instead of updating its value.

2. Step 2: Correct way to update store

   Use count.update(n => n + 1) or count.set(newValue) to change the store's value reactively.

3. Final Answer:

   You cannot reassign the store variable; must use count.update() or count.set(). -> Option B

4. Quick Check:

   Update store with update() or set(), not reassignment [OK]

Hint: Use update() or set(), never reassign store variable [OK]

Common Mistakes:

• Trying to assign store variable directly
• Ignoring reactive update methods
• Thinking writable stores can't hold numbers

5. You want to share a theme color across your entire Svelte app and reactively update it from any component. Which approach is best and why?

hard

A. Use a writable store for the theme color because stores provide reactive global state accessible anywhere.

B. Use Context API because it automatically updates all components globally.

C. Pass the theme color as a prop to every component manually.

D. Use a local variable in each component to store the theme color.

Solution

1. Step 1: Identify requirement for global reactive state

   The theme color must be shared app-wide and update reactively from any component.

2. Step 2: Compare Context API and stores

   Context API only shares data between parent and children, not globally. Stores provide reactive global state accessible anywhere.

3. Final Answer:

   Use a writable store for the theme color because stores provide reactive global state accessible anywhere. -> Option A

4. Quick Check:

   Global reactive state needs stores, not Context API [OK]

Hint: Global reactive state? Use stores, not Context API [OK]

Common Mistakes:

• Choosing Context API for global state
• Passing props everywhere manually
• Using local variables that don't sync