Context key patterns in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Svelte context example?

Consider a parent component that sets a context key and a child component that reads it. What will the child display?

Svelte

/* Parent.svelte */
<script>
  import { setContext } from 'svelte';
  setContext('user', { name: 'Alice' });
</script>
<Child />

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

A Alice

B undefined

C Error: Context key 'user' not found

D null

💡 Hint

Remember that setContext shares data with descendants using the same key.

The parent sets the context key 'user' with an object containing name: 'Alice'. The child retrieves this context and displays user.name, so it outputs 'Alice'.

📝 Syntax

intermediate

Which option correctly sets and gets a context key in Svelte?

Identify the option that uses valid Svelte syntax to set and get a context key named 'theme'.

A

<script>import { setContext } from 'svelte'; setContext('theme', );</script>
<script>import { getContext } from 'svelte'; const theme = getContext('theme');</script>

B

<script>import { setContext } from 'svelte'; setContext(theme, 'dark');</script>
<script>import { getContext } from 'svelte'; const theme = getContext(theme);</script>

C

<script>import { setContext } from 'svelte'; setContext('theme');</script>
<script>import { getContext } from 'svelte'; const theme = getContext('theme');</script>

D

<script>import { setContext } from 'svelte'; setContext('theme', 'dark');</script>
<script>import { getContext } from 'svelte'; const theme = getContext('theme');</script>

💡 Hint

Check that the key is a string and the value is provided when setting context.

Option D correctly uses a string key 'theme' and provides a value 'dark' to setContext. The getContext call uses the same string key. Other options either omit the value or use an undefined variable as key.

🔧 Debug

advanced

Why does this Svelte child component fail to get context?

Given the parent sets context with setContext('data', 123), why does the child get undefined when calling getContext('data')?

Svelte

/* Parent.svelte */
<script>
  import { setContext } from 'svelte';
  setContext('data', 123);
</script>
<Child />

/* Child.svelte */
<script>
  import { getContext } from 'svelte';
  const data = getContext('data');
  console.log(data);
</script>

A The context key 'data' is misspelled in the child component.

B The child is not a descendant of the parent component in the component tree.

C setContext must be called inside onMount lifecycle to work.

D getContext only works with numeric keys, not strings.

💡 Hint

Think about how Svelte context works with component hierarchy.

Context in Svelte only works between components in a parent-child relationship. If the child is not actually nested inside the parent in the component tree, it won't receive the context and getContext returns undefined.

❓ state_output

advanced

What is the output when context value changes in Svelte?

In this example, the parent updates the context value after 1 second. What does the child display before and after the update?

Svelte

/* Parent.svelte */
<script>
  import { setContext } from 'svelte';
  import { writable } from 'svelte/store';
  const count = writable(0);
  setContext('count', count);
  setTimeout(() => count.set(5), 1000);
</script>
<Child />

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

A Throws an error because context value is not a primitive

B Always 0, does not update

C Initially 0, then updates to 5 after 1 second

D Initially undefined, then 5 after 1 second

💡 Hint

Remember that Svelte stores are reactive and can be shared via context.

The parent sets a writable store as context. The child subscribes to it with {$count}. When the store updates after 1 second, the child automatically updates the displayed value.

🧠 Conceptual

expert

Which pattern is best for unique context keys in Svelte to avoid collisions?

When multiple libraries or components use context keys, how can you ensure keys do not collide?

A Use Symbols as context keys instead of strings

B Prefix all string keys with the component name

C Use numbers as keys because they are unique

D Use global variables as keys to share across apps

💡 Hint

Think about JavaScript features that guarantee uniqueness.

Symbols are unique and immutable, so using them as context keys prevents accidental collisions between different parts of an app or libraries. Prefixing strings helps but does not guarantee uniqueness.