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.

Practice

1. What is the main purpose of getContext in Svelte?

easy

A. To access data provided by a parent component without passing props

B. To create a new reactive variable inside a component

C. To define a component's local state

D. To listen for DOM events inside a component

Solution

1. Step 1: Understand the role of getContext

   getContext is used to access data that a parent component has shared using setContext.

2. Step 2: Compare with other options

   Other options describe unrelated tasks like local state or event listening, which getContext does not do.

3. Final Answer:

   To access data provided by a parent component without passing props -> Option A

4. Quick Check:

   getContext accesses parent data = B [OK]

Hint: Remember: getContext reads shared parent data [OK]

Common Mistakes:

• Confusing getContext with local state creation
• Thinking getContext listens to events
• Assuming getContext sets data instead of getting

2. Which of the following is the correct syntax to retrieve a context value with key 'user' in a Svelte component?

easy

A. const user = getContext({ key: 'user' });

B. const user = getContext('user');

C. const user = getContext(user);

D. const user = setContext('user');

Solution

1. Step 1: Recall getContext syntax

   getContext takes a string key to retrieve the shared value.

2. Step 2: Analyze options

   const user = getContext('user'); uses the correct string key syntax. const user = setContext('user'); wrongly uses setContext. const user = getContext(user); passes a variable instead of a string. const user = getContext({ key: 'user' }); passes an object, which is invalid.

3. Final Answer:

   const user = getContext('user'); -> Option B

4. Quick Check:

   getContext('key') syntax = D [OK]

Hint: Use string keys in quotes with getContext [OK]

Common Mistakes:

• Using setContext instead of getContext
• Passing variables or objects instead of string keys
• Missing quotes around the key

3. Given the parent component sets context with setContext('theme', 'dark'), what will the child component log with console.log(getContext('theme'))?

medium

A. 'dark'

B. 'light'

C. undefined

D. null

Solution

1. Step 1: Understand setContext and getContext relation

   The parent sets the key 'theme' with value 'dark'. The child uses getContext with the same key.

2. Step 2: Determine the logged value

   Since the keys match, getContext returns 'dark'. Other options are incorrect values or undefined.

3. Final Answer:

   'dark' -> Option A

4. Quick Check:

   Matching keys return set value = A [OK]

Hint: Matching keys return parent's setContext value [OK]

Common Mistakes:

• Expecting default or unrelated values
• Using different keys causing undefined
• Confusing setContext and getContext roles

4. What is the error in this child component code snippet?

const data = getContext();

medium

A. getContext must be imported from 'svelte/store'

B. getContext cannot be used in child components

C. getContext requires two arguments

D. Missing key argument in getContext call

Solution

1. Step 1: Check getContext usage

   getContext requires a key argument to specify which context to retrieve.

2. Step 2: Evaluate the code snippet

   The snippet calls getContext without any argument, causing an error.

3. Final Answer:

   Missing key argument in getContext call -> Option D

4. Quick Check:

   getContext needs a key argument = A [OK]

Hint: Always pass a key string to getContext [OK]

Common Mistakes:

• Calling getContext without arguments
• Thinking getContext needs two arguments
• Importing getContext from wrong module

5. In a nested component structure, if a grandchild calls getContext('settings') but only the grandparent used setContext('settings', {mode: 'auto'}), what will the grandchild receive?

hard

A. An error because only the direct parent can provide context

B. undefined because context is not passed through intermediate components

C. The object {mode: 'auto'} from the grandparent

D. An empty object {} because context resets at each level

Solution

1. Step 1: Understand context propagation in Svelte

   Context set by any ancestor is accessible by all descendants, not just direct children.

2. Step 2: Apply to the nested structure

   The grandchild can access the 'settings' context set by the grandparent, receiving the object {mode: 'auto'}.

3. Final Answer:

   The object {mode: 'auto'} from the grandparent -> Option C

4. Quick Check:

   Context flows down all descendants = C [OK]

Hint: Context flows down all descendants, not just direct children [OK]

Common Mistakes:

• Thinking only direct parent context is accessible
• Expecting undefined if intermediate components don't set context
• Assuming context resets at each component level