getContext in Svelte - Step-by-Step Execution

Concept Flow - getContext

Parent Component

↓

Call setContext(key, value)

↓

Child Component

↓

Call getContext(key)

↓

Receive value from Parent

↓

Use value in Child

The parent sets a context value with a key, then the child retrieves it using getContext with the same key.

Execution Sample

Svelte

import { setContext, getContext } from 'svelte';

// Parent.svelte
setContext('color', 'blue');

// Child.svelte
const color = getContext('color');

Parent sets a context value 'color' to 'blue', child gets 'color' from context.

Execution Table

Step	Component	Action	Key	Value	Result
1	Parent	setContext	color	blue	Stores 'blue' under 'color' key
2	Child	getContext	color	-	Retrieves 'blue' from context
3	Child	Use value	-	blue	Uses 'blue' as color value
4	End	-	-	-	Child has access to parent's context value

💡 Child retrieves value successfully; execution ends.

Variable Tracker

Variable	Start	After Parent setContext	After Child getContext	Final
context['color']	undefined	'blue'	'blue'	'blue'
color (in Child)	undefined	undefined	'blue'	'blue'

Key Moments - 2 Insights

Why does getContext('color') return undefined if called in Parent?

Because setContext stores the value for child components, not for the same component. Execution_table row 2 shows getContext is called in Child, not Parent.

What happens if the key used in getContext does not exist?

getContext returns undefined if no matching key is found. Execution_table row 2 shows retrieval of existing key; missing keys return undefined.

Visual Quiz - 3 Questions

Look at the execution table, what value does getContext('color') return at step 2?

A 'red'

B 'blue'

C undefined

D null

💡 Hint

Check row 2 in execution_table where getContext('color') returns the stored value.

At which step does the child component receive the context value?

A Step 1

B Step 3

C Step 2

D Step 4

💡 Hint

Look at execution_table row 2 where getContext is called in Child.

If the parent sets context with key 'theme' instead of 'color', what happens when child calls getContext('color')?

A Child gets undefined

B Child gets 'theme'

C Child gets 'blue'

D Error thrown

💡 Hint

Refer to variable_tracker showing context keys and values.

Concept Snapshot

getContext lets a child component access data set by a parent with setContext.
Parent calls setContext(key, value).
Child calls getContext(key) to retrieve value.
Only children can access parent's context.
If key not found, getContext returns undefined.

Full Transcript

In Svelte, getContext is used by a child component to get data from its parent. The parent uses setContext with a key and value. Then the child calls getContext with the same key to get that value. This lets components share data without passing props directly. The execution flow starts with the parent setting context, then the child retrieving it. Variables track the stored context and the child's received value. If the key is missing, getContext returns undefined. This method helps keep components connected in a clean way.