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.