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.