Context with stores in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Svelte component using context with a store?

Consider a parent component that sets a writable store in context and a child component that subscribes to it. What will the child display?

Svelte

/* Parent.svelte */
<script>
  import { writable } from 'svelte/store';
  import { setContext } from 'svelte';
  import Child from './Child.svelte';

  const count = writable(5);
  setContext('countStore', count);
</script>

<Child />

/* Child.svelte */
<script>
  import { getContext } from 'svelte';
  const count = getContext('countStore');
</script>

<p>{$count}</p>

A 0

B undefined

C 5

D Error: Cannot read property '$count' of undefined

💡 Hint

Remember that setContext shares the store instance, and $count auto-subscribes.

The parent sets a writable store with initial value 5 in context. The child gets the same store and uses $count to auto-subscribe and display its value. So the output is 5.

❓ state_output

intermediate

What is the value of $user.name after updating the store in context?

A Svelte app sets a store with an object in context. After updating the store's name property, what does the child component see?

Svelte

/* Parent.svelte */
<script>
  import { writable } from 'svelte/store';
  import { setContext } from 'svelte';

  const user = writable({ name: 'Alice', age: 30 });
  setContext('userStore', user);

  // Update name after 100ms
  setTimeout(() => {
    user.update(u => ({ ...u, name: 'Bob' }));
  }, 100);
</script>

<Child />

/* Child.svelte */
<script>
  import { getContext } from 'svelte';
  const user = getContext('userStore');
</script>

<p>{$user.name}</p>

A Bob

B Alice

C undefined

D Error: Cannot read property 'name' of undefined

💡 Hint

The store updates asynchronously after 100ms. The child subscribes to the store.

The store initially has name 'Alice'. After 100ms, the store updates to name 'Bob'. The child component reacts to this update and displays 'Bob'.

📝 Syntax

advanced

Which option correctly sets and gets a readable store in Svelte context?

Identify the correct code snippet that sets a readable store in context and retrieves it in a child component.

A

/* Parent.svelte */
import { readable } from 'svelte/store';
import { setContext } from 'svelte';
const time = readable(new Date(), set => {
  set(new Date());
  return () => {};
});
setContext('timeStore', time);

/* Child.svelte */
import { getContext } from 'svelte';
const time = getContext('timeStore');
<p>{$time.toLocaleTimeString()}</p>

B

/* Parent.svelte */
import { readable } from 'svelte/store';
import { setContext } from 'svelte';
const time = readable(new Date(), () => {
  const interval = setInterval(() => time.set(new Date()), 1000);
  return () => clearInterval(interval);
});
setContext('timeStore', time);

/* Child.svelte */
import { getContext } from 'svelte';
const time = getContext('timeStore');
<p>{$time.toLocaleTimeString()}</p>

C

/* Parent.svelte */
import { readable } from 'svelte/store';
import { setContext } from 'svelte';
const time = readable(new Date());
setContext('timeStore', time);

/* Child.svelte */
import { getContext } from 'svelte';
const time = getContext('timeStore');
<p>{$time.toLocaleTimeString()}</p>

D

/* Parent.svelte */
import { readable } from 'svelte/store';
import { setContext } from 'svelte';
const time = readable(new Date(), set => {
  const interval = setInterval(() => set(new Date()), 1000);
  return () => clearInterval(interval);
});
setContext('timeStore', time);

/* Child.svelte */
import { getContext } from 'svelte';
const time = getContext('timeStore');
<p>{$time.toLocaleTimeString()}</p>

💡 Hint

Check how the readable store's start function uses the set callback.

Option D correctly uses the set callback inside the readable store's start function to update the store value every second. The child subscribes and displays the time.

Option D incorrectly tries to call time.set which does not exist on a readable store.

Option D does not provide a start function, so the store never updates.

Option D calls set only once and does not update periodically.

🔧 Debug

advanced

Why does this Svelte child component fail to update when the store in context changes?

The parent sets a writable store in context and updates it. The child gets the store but does not update its display. What is the cause?

Svelte

/* Parent.svelte */
<script>
  import { writable } from 'svelte/store';
  import { setContext } from 'svelte';

  const count = writable(0);
  setContext('countStore', count);

  setTimeout(() => count.set(10), 100);
</script>

<Child />

/* Child.svelte */
<script>
  import { getContext } from 'svelte';
  const count = getContext('countStore');
</script>

<p>{count}</p>

A The child uses {count} instead of {$count}, so it does not subscribe to the store.

B The parent did not call setContext correctly, so the child gets undefined.

C The store is not writable, so updates do not propagate.

D The child must import the store directly instead of using getContext.

💡 Hint

Check how Svelte auto-subscription works with stores in templates.

The child component uses {count} which prints the store object itself, not its value. To auto-subscribe and get the current value, it must use {$count}.

🧠 Conceptual

expert

What happens if you set a store in Svelte context and then overwrite it with another store under the same key?

In a Svelte app, a parent sets a writable store in context with key 'data'. Later, it sets a different readable store with the same key 'data'. What will a child component get when calling getContext('data')?

A The child gets undefined because overwriting context keys is not allowed.

B The child gets the second store (the readable one) because the last setContext call overwrites the previous value.

C The child gets an array containing both stores.

D The child gets the first store (the writable one) because setContext only sets once per key.

💡 Hint

Think about how setContext works when called multiple times with the same key.

In Svelte, setContext stores a value by key. If called multiple times with the same key, the last value overwrites the previous one. So the child gets the last store set.

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