Context vs stores decision in Svelte - Practice Questions

Challenge - 5 Problems

🧠 Conceptual

intermediate

When to use context vs stores in Svelte?

Which scenario is best suited for using context instead of stores in Svelte?

A Passing data deeply through a component tree without prop drilling, but only within a specific subtree.

B Managing asynchronous data fetching with automatic updates.

C Storing user preferences that need to persist across page reloads.

D Sharing reactive data globally across unrelated components anywhere in the app.

💡 Hint

Think about the scope and lifetime of data when choosing between context and stores.

Context is ideal for passing data down a specific component subtree without prop drilling. Stores are better for global reactive data accessible anywhere.

❓ component_behavior

intermediate

Effect of updating a store vs context on components

Consider a Svelte app where a store and a context both hold a count value. If the store's count changes, which components update? What about if the context's count changes?

A All components update for both store and context changes regardless of location.

B All components subscribed to the store update; only components within the context subtree update when context changes.

C No components update automatically; manual refresh is needed.

D Only components within the context subtree update for both store and context changes.

💡 Hint

Remember how reactivity works with stores and context in Svelte.

Stores notify all subscribers anywhere in the app. Context updates only affect components that consume that context within the subtree.

📝 Syntax

advanced

Correct syntax to set and get context in Svelte

Which option shows the correct way to set and get context in Svelte components?

A In parent: <code>setContext('key', value);</code> In child: <code>const val = getContext('key');</code>

B In parent: <code>context.set('key', value);</code> In child: <code>const val = context.get('key');</code>

C In parent: <code>getContext('key', value);</code> In child: <code>const val = setContext('key');</code>

D In parent: <code>set('key', value);</code> In child: <code>const val = get('key');</code>

💡 Hint

Check official Svelte API for context functions.

setContext is used in a parent to provide data, and getContext is used in a child to consume it.

🔧 Debug

advanced

Why does a Svelte store update not reflect in a component?

A Svelte component subscribes to a writable store but does not update when the store value changes. What is the most likely cause?

A The store value was updated with <code>store.set()</code> instead of <code>store.update()</code>.

B The store was created with <code>readable</code> instead of <code>writable</code>.

C The component uses <code>$store</code> syntax but forgot to declare <code>let $store</code>.

D The component did not import the store instance correctly and is using a different store object.

💡 Hint

Check if the component and the store share the same instance.

If the component imports a different store instance than the one updated, it won't react to changes.

❓ state_output

expert

Output after context and store updates in nested components

Given the following Svelte setup:

Parent.svelte:




Child.svelte:

Context count: {contextCount}
Store count: {storeCount}

What is the output after clicking the button twice?

A

Context count: 0
Store count: 2

B

Context count: 12
Store count: 2

C

Context count: 10
Store count: 2

D

Context count: 10
Store count: 0

💡 Hint

Remember context is static unless reset; store updates reactively change subscribed values.

The context value is set once to 10 and does not change. The store starts at 0 and increments twice to 2.

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