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.