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.

Practice

1. What is the main reason to use Symbol as a context key in Svelte?

easy

A. To ensure the key is unique and avoid conflicts between components

B. To make the key a string for easier debugging

C. To allow the key to be reused as a CSS class name

D. To automatically serialize the key for storage

Solution

1. Step 1: Understand context keys purpose

   Context keys identify data shared between components without props.

2. Step 2: Why use Symbol?

   Symbols are unique values, preventing accidental key collisions.

3. Final Answer:

   To ensure the key is unique and avoid conflicts between components -> Option A

4. Quick Check:

   Unique keys = Symbol usage [OK]

Hint: Symbols guarantee unique keys, preventing conflicts [OK]

Common Mistakes:

• Using strings that can clash with other keys
• Thinking keys must be strings for context
• Reusing keys across unrelated components

2. Which of the following is the correct way to create and export a context key in Svelte?

easy

A. export let key = new Symbol('myKey');

B. export const key = 'myKey';

C. const key = Symbol('myKey'); export default key;

D. export const key = Symbol('myKey');

Solution

1. Step 1: Check correct Symbol creation

   Symbols are created with Symbol('description'), not with new.

2. Step 2: Check export syntax

   Exporting a constant with export const key = Symbol('myKey'); is correct and common.

3. Final Answer:

   export const key = Symbol('myKey'); -> Option D

4. Quick Check:

   Correct Symbol export = export const key = Symbol('myKey'); [OK]

Hint: Use export const with Symbol() without new keyword [OK]

Common Mistakes:

• Using string instead of Symbol for key
• Using new Symbol() which is invalid
• Exporting default instead of named export

3. Given this code snippet, what will be logged in the Child.svelte component?

/* key.js */
export const userKey = Symbol('user');

/* Parent.svelte */
import { setContext } from 'svelte';
import { userKey } from './key.js';

setContext(userKey, { name: 'Alice' });

/* Child.svelte */
import { getContext } from 'svelte';
import { userKey } from './key.js';

const user = getContext(userKey);
console.log(user.name);

medium

A. Alice

B. undefined

C. Error: userKey is not defined

D. null

Solution

1. Step 1: Understand setContext and getContext usage

   Parent sets context with key userKey and value { name: 'Alice' }.

2. Step 2: Child retrieves context using same key

   Child imports userKey and calls getContext(userKey), getting the object.

3. Final Answer:

   Alice -> Option A

4. Quick Check:

   Matching keys return value = Alice [OK]

Hint: Matching Symbol keys share data correctly [OK]

Common Mistakes:

• Using different keys causing undefined
• Forgetting to import the shared key
• Expecting string keys instead of Symbol keys

4. Identify the error in this Svelte code using context keys:

/* key.js */
export const themeKey = Symbol('theme');

/* Parent.svelte */
import { setContext } from 'svelte';
import { themeKey } from './key.js';

setContext('themeKey', 'dark');

/* Child.svelte */
import { getContext } from 'svelte';
import { themeKey } from './key.js';

const theme = getContext(themeKey);
console.log(theme);

medium

A. Forgetting to import setContext in Parent

B. Using string 'themeKey' instead of Symbol key in setContext

C. Using getContext before setContext is called

D. Not exporting themeKey from key.js

Solution

1. Step 1: Check setContext key usage

   Parent uses string 'themeKey' instead of the Symbol themeKey imported from key.js.

2. Step 2: Understand key mismatch effect

   Child uses Symbol key, so getContext returns undefined because keys differ.

3. Final Answer:

   Using string 'themeKey' instead of Symbol key in setContext -> Option B

4. Quick Check:

   Key mismatch causes undefined context [OK]

Hint: Always use the same Symbol key in setContext and getContext [OK]

Common Mistakes:

• Mixing string and Symbol keys
• Assuming string keys work like Symbols
• Not importing the shared key properly

5. You want to share a theme object between multiple nested components using context keys. Which pattern is best to avoid key conflicts and ensure consistent usage?

hard

A. Create a new Symbol key in each component separately

B. Use a plain string key like 'theme' directly in setContext and getContext calls

C. Define and export a unique Symbol key in a separate file, then import it in all components

D. Use a global variable without context to share the theme

Solution

1. Step 1: Understand key uniqueness and sharing

   Using a shared Symbol key exported from one file ensures all components use the exact same key.

2. Step 2: Avoid conflicts and inconsistencies

   Using strings or separate Symbols risks conflicts or mismatches causing bugs.

3. Final Answer:

   Define and export a unique Symbol key in a separate file, then import it in all components -> Option C

4. Quick Check:

   Shared Symbol key file = consistent context [OK]

Hint: Keep keys in one file, import everywhere to avoid conflicts [OK]

Common Mistakes:

• Using different keys in different components
• Relying on strings that may clash
• Avoiding context and using globals instead