Context key patterns in Svelte - Step-by-Step Execution

Concept Flow - Context key patterns

Parent Component

↓

Set Context with key

↓

Child Component

↓

Get Context with same key

↓

Use shared data

↓

Render output

The parent sets a context value with a key, the child retrieves it using the same key, then uses the shared data to render.

Execution Sample

Svelte

import { setContext, getContext } from 'svelte';

// Parent.svelte
setContext('user', { name: 'Anna' });

// Child.svelte
const user = getContext('user');
console.log(user.name);

Parent sets a context key 'user' with data; child gets the same key and accesses the data.

Execution Table

Step	Action	Context Key	Value Set/Get	Result/Output
1	Parent calls setContext	'user'	{ name: 'Anna' }	Context 'user' set with object
2	Child calls getContext	'user'	retrieves value	{ name: 'Anna' } returned
3	Child accesses user.name	-	-	'Anna' logged to console
4	Child renders	-	-	Displays 'Anna' in UI
5	Execution ends	-	-	Context sharing complete

💡 All context keys set and retrieved correctly; child uses shared data.

Variable Tracker

Variable	Start	After Step 1	After Step 2	Final
context['user']	undefined	{ name: 'Anna' }	{ name: 'Anna' }	{ name: 'Anna' }
user	undefined	undefined	{ name: 'Anna' }	{ name: 'Anna' }

Key Moments - 2 Insights

Why must the key used in setContext and getContext be exactly the same?

Because getContext looks up the value by the exact key set by setContext. If keys differ, getContext returns undefined, as shown in step 2 of the execution_table.

Can child components access context keys set by sibling components?

No, context is passed down the component tree. Only children of the component that called setContext can access that context key, as shown by the parent-child flow in concept_flow.

Visual Quiz - 3 Questions

Look at the execution_table, what value does getContext('user') return at step 2?

A { name: 'Anna' }

B undefined

C null

D An error

💡 Hint

Check the 'Value Set/Get' and 'Result/Output' columns in step 2 of execution_table.

At which step does the child component log the user's name to the console?

A Step 2

B Step 3

C Step 1

D Step 4

💡 Hint

Look for the step mentioning console output in the execution_table.

If the parent used setContext('User', { name: 'Anna' }) with uppercase 'U', what would getContext('user') return?

A { name: 'Anna' }

B null

C undefined

D An error

💡 Hint

Context keys are case-sensitive; see key_moments about exact key matching.

Concept Snapshot

Svelte context shares data between components.
Parent uses setContext(key, value).
Child uses getContext(key) with same key.
Keys must match exactly (case-sensitive).
Only child components can access parent's context.
Useful for passing data without props.

Full Transcript

In Svelte, context key patterns let a parent component share data with its children without passing props. The parent calls setContext with a key and value. Children call getContext with the same key to retrieve the data. This works only if the keys match exactly, including case. The shared data can then be used in the child component, for example to display a user's name. Context is passed down the component tree, so siblings cannot access each other's context. This pattern helps keep components clean and connected.

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