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

Concept Flow - Context vs stores decision

Start

↓

Need to share data?

Yes↓

Is data local to component tree?

No→Use store

Yes↓

Use context API

↓

Components access data

↓

Update data triggers UI refresh

↓

End

Decide if data is shared locally in a component tree (use context) or globally across app (use store). Components then access and update data accordingly.

Execution Sample

Svelte

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

// Store example
const count = writable(0);

// Context example
setContext('key', count);

Shows creating a store and setting it in context for child components to access.

Execution Table

Step	Action	Data Location	Method Used	Result
1	Decide to share data	Local tree	Use context API	setContext called with key and data
2	Child component accesses data	Local tree	getContext with key	Receives data from context
3	Update data in context	Local tree	Update store inside context	UI updates in components using context
4	Decide to share data	Global app	Use store directly	Store created with writable()
5	Any component subscribes	Global app	Subscribe to store	Receives current data and updates
6	Update store value	Global app	Call store.set()	All subscribers update UI
7	End	-	-	Data sharing and updates complete

💡 Data sharing method chosen based on scope: context for local tree, store for global app

Variable Tracker

Variable	Start	After Step 1	After Step 3	After Step 4	After Step 6	Final
count	undefined	writable(0) in context	updated value (e.g., 1)	writable(0) global store	updated value (e.g., 2)	final updated value

Key Moments - 3 Insights

Why use context instead of a store for local data?

Context shares data only within a specific component subtree, avoiding global subscriptions. See execution_table step 1 and 2 where context is set and accessed locally.

Can stores be used inside context?

Yes, stores can be passed via context to share reactive data locally. Execution_table step 3 shows updating a store inside context triggers UI updates.

When should I choose a store over context?

Use stores when data must be shared globally across many unrelated components. Execution_table steps 4-6 show global store creation and updates.

Visual Quiz - 3 Questions

Look at the execution_table, at which step is context data accessed by a child component?

A Step 4

B Step 2

C Step 5

D Step 6

💡 Hint

Check the 'Method Used' column for 'getContext' usage in execution_table step 2

According to variable_tracker, what is the value of 'count' after step 3?

A updated value (e.g., 1)

B writable(0)

C undefined

D final updated value

💡 Hint

Look at the 'After Step 3' column for 'count' in variable_tracker

If data is shared globally, which method is used according to execution_table?

A setContext

B getContext

C writable store

D local variable

💡 Hint

See execution_table steps 4-6 describing global data sharing

Concept Snapshot

Context vs Stores Decision in Svelte:
- Use context API to share data locally within a component tree.
- Use writable stores to share data globally across the app.
- Context passes data down without global subscriptions.
- Stores provide reactive global state accessible anywhere.
- Choose based on data scope and update needs.

Full Transcript

This visual execution shows how to decide between using context or stores in Svelte for sharing data. First, if data is only needed within a component subtree, use the context API by setting data with setContext and accessing it with getContext. This keeps data local and avoids global subscriptions. If data must be shared globally across many components, create a writable store and subscribe to it wherever needed. Updates to the store automatically refresh all subscribers. The execution table traces steps for both approaches, showing when context is set and accessed, and when stores are created and updated. The variable tracker follows the store variable 'count' as it changes. Key moments clarify why and when to use each method. The quiz tests understanding of these steps. This helps beginners visually grasp the decision and flow of data sharing in Svelte.

Practice

1. In Svelte, when should you use context instead of stores?

easy

A. To manage asynchronous data fetching

B. To share data only between a parent and its child components locally

C. To share reactive data globally across unrelated components

D. To create CSS styles scoped to a component

Solution

1. Step 1: Understand context usage

   Context is designed to share data locally down the component tree without passing props explicitly.

2. Step 2: Compare with stores

   Stores are for global reactive data accessible anywhere by importing, not limited to parent-child.

3. Final Answer:

   To share data only between a parent and its child components locally -> Option B

4. Quick Check:

   Context = local sharing [OK]

Hint: Context is for local, stores for global reactive data [OK]

Common Mistakes:

• Using stores for local-only data sharing
• Confusing context with global state management
• Thinking context is reactive globally
• Using context for styling or async tasks

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

easy

A. import { createContext } from 'svelte'; createContext('key', value);

B. import { useContext } from 'svelte'; useContext('key', value);

C. import { setContext } from 'svelte'; setContext('key', value);

D. import { setStore } from 'svelte'; setStore('key', value);

Solution

1. Step 1: Recall Svelte context API

   Svelte uses setContext to provide a value to child components.

2. Step 2: Check import and usage

   The correct import is from 'svelte' and the function is setContext with key and value.

3. Final Answer:

   import { setContext } from 'svelte'; setContext('key', value); -> Option C

4. Quick Check:

   setContext = provide context [OK]

Hint: Use setContext to provide data down the tree [OK]

Common Mistakes:

• Using createContext or useContext which are React terms
• Trying to set stores with setContext
• Wrong import paths or function names
• Confusing setContext with reactive stores

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

import { writable } from 'svelte/store';

const count = writable(0);

count.subscribe(value => console.log(value));

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

medium

A. [0, 5, 6]

B. [5, 6]

C. [0, 1, 5]

D. [1, 5, 6]

Solution

1. Step 1: Understand initial subscription call

   Subscribing to a writable store immediately calls the callback with the current value, which is 0.

2. Step 2: Trace set and update calls

   Then count.set(5) triggers callback with 5, and count.update(n => n + 1) triggers callback with 6.

3. Final Answer:

   [0, 5, 6] -> Option A

4. Quick Check:

   Subscription calls on current and changes [OK]

Hint: Subscription logs current value immediately [OK]

Common Mistakes:

• Ignoring initial subscription call
• Mixing order of set and update
• Assuming update starts from 0 after set
• Confusing subscribe behavior with events

4. What is wrong with this Svelte code snippet that tries to share data using context?

import { getContext } from 'svelte';

const value = getContext('user');

console.log(value);

medium

A. It tries to get context outside a component setup, causing undefined

B. It uses getContext instead of setContext to provide data

C. The key 'user' must be an object, not a string

D. getContext requires two arguments, key and default value

Solution

1. Step 1: Check context usage location

   getContext must be called inside a component's script during initialization, not in a module scope.

2. Step 2: Understand consequence

   Calling it outside component setup returns undefined because no context is set yet.

3. Final Answer:

   It tries to get context outside a component setup, causing undefined -> Option A

4. Quick Check:

   getContext only works inside component setup [OK]

Hint: Use getContext only inside component scripts [OK]

Common Mistakes:

• Calling getContext in module scope
• Confusing getContext with setContext usage
• Assuming string keys must be objects
• Expecting getContext to have default value argument

5. You want to share a reactive theme color across many unrelated components in a Svelte app. Which approach is best and why?

hard

A. Use a global variable for shared data

B. Use context API for local tree sharing

C. Pass props through all components manually

D. Use a writable store for global reactive data

Solution

1. Step 1: Identify sharing scope

   The theme color must be shared globally across unrelated components, not just parent-child.

2. Step 2: Choose reactive global sharing

   Writable stores provide reactive global state accessible by importing anywhere.

3. Step 3: Evaluate other options

   Context is local only, props are tedious for many components, global variables lack reactivity.

4. Final Answer:

   Use a writable store for global reactive data -> Option D

5. Quick Check:

   Stores = global reactive sharing [OK]

Hint: Use stores for global reactive data, context for local only [OK]

Common Mistakes:

• Using context for global sharing
• Passing props through many unrelated components
• Using global variables without reactivity
• Ignoring reactivity needs for theme changes