Why context shares data without prop drilling in Svelte - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a context key using Svelte's setContext.

Svelte

import { setContext } from 'svelte';
const key = [1];
setContext(key, 'shared data');

Drag options to blanks, or click blank then click option'

ASymbol('myKey')

Bnew Map()

C'myKey'

D123

Attempts:

3 left

💡 Hint

Common Mistakes

Using a plain string key can cause conflicts if reused.

Using Symbol('myKey') creates a unique key for context, avoiding conflicts.

2fill in blank

medium

Complete the code to get the shared context data in a child component using getContext.

Svelte

import { getContext } from 'svelte';
const key = Symbol('myKey');
const data = [1](key);

Drag options to blanks, or click blank then click option'

AcreateContext

BgetContext

CuseContext

DsetContext

Attempts:

3 left

💡 Hint

Common Mistakes

Using setContext instead of getContext to retrieve data.

getContext retrieves the data set by setContext using the same key.

3fill in blank

hard

Fix the error in the code to share data without prop drilling by correctly setting and getting context.

Svelte

/* Parent.svelte */
import { setContext } from 'svelte';
const key = Symbol('myKey');
let sharedData = 'shared data';
setContext(key, [1]);

/* Child.svelte */
import { getContext } from 'svelte';
const key = Symbol('myKey');
const data = getContext(key);

Drag options to blanks, or click blank then click option'

Anull

B42

C'shared data'

DsharedData

Attempts:

3 left

💡 Hint

Common Mistakes

Setting context with a string literal instead of a variable.

The parent must set context with a variable sharedData that holds the data to share.

4fill in blank

hard

Fill both blanks to create and use context to share a count value without prop drilling.

Svelte

import { setContext, getContext } from 'svelte';

/* Parent.svelte */
const key = [1];
setContext(key, 10);

/* Child.svelte */
const count = [2](key);

Drag options to blanks, or click blank then click option'

ASymbol('countKey')

BgetContext

CsetContext

D'countKey'

Attempts:

3 left

💡 Hint

Common Mistakes

Using string keys that can collide.

Using setContext to get data.

Use a unique Symbol as the key and getContext to retrieve the value.

5fill in blank

hard

Fill all three blanks to share a reactive store via context and access it in a child component.

Svelte

import { writable } from 'svelte/store';
import { setContext, getContext } from 'svelte';

const key = [1];
const count = [2](0);
setContext(key, count);

// In child component
const countStore = [3](key);

Drag options to blanks, or click blank then click option'

ASymbol('storeKey')

Bwritable

CgetContext

Dreadable

Attempts:

3 left

💡 Hint

Common Mistakes

Using readable instead of writable for a store that changes.

Not using getContext to access the store.

Create a unique Symbol key, a writable store, set it in context, and get it in the child.

Practice

1. Why does Svelte's context API help avoid prop drilling?

easy

A. Because it allows sharing data directly between components without passing props through every level

B. Because it automatically updates the DOM without any code

C. Because it replaces the need for events between components

D. Because it forces all components to use the same state variable

Solution

1. Step 1: Understand prop drilling

   Prop drilling means passing data through many intermediate components even if they don't need it.

2. Step 2: How context helps

   Context lets a parent share data directly with any child, skipping intermediate components.

3. Final Answer:

   Because it allows sharing data directly between components without passing props through every level -> Option A

4. Quick Check:

   Context avoids prop drilling = D [OK]

Hint: Context shares data directly, skipping intermediate props [OK]

Common Mistakes:

• Thinking context replaces events
• Believing context auto-updates DOM
• Assuming all components share one state variable

2. Which Svelte function is used to provide context data to child components?

easy

A. getContext

B. setContext

C. useContext

D. provideContext

Solution

1. Step 1: Identify context provider function

   In Svelte, setContext is used in a parent to provide data.

2. Step 2: Differentiate from consumer function

   getContext is used in children to access that data, not to provide it.

3. Final Answer:

   setContext -> Option B

4. Quick Check:

   Provide context = setContext [OK]

Hint: Use setContext to provide data, getContext to consume [OK]

Common Mistakes:

• Confusing getContext as provider
• Using React's useContext in Svelte
• Assuming provideContext exists

3. What will be logged by the child component in this Svelte code?

/* Parent.svelte */



/* Child.svelte */

medium

A. Anna

B. undefined

C. Error: getContext not found

D. null

Solution

1. Step 1: Understand setContext usage

   The parent sets context with key 'user' and value { name: 'Anna' }.

2. Step 2: Child accesses context

   The child calls getContext('user') and gets the object, then logs user.name which is 'Anna'.

3. Final Answer:

   Anna -> Option A

4. Quick Check:

   getContext returns provided data = Anna [OK]

Hint: getContext returns parent's data by key [OK]

Common Mistakes:

• Expecting undefined if not passed as prop
• Confusing getContext with props
• Thinking getContext throws error if key missing

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

/* Parent.svelte */


/* Child.svelte */

medium

A. Context keys must be numbers, not strings

B. setContext must be called inside onMount lifecycle

C. getContext cannot be used in child components

D. The key used in getContext has different capitalization than setContext

Solution

1. Step 1: Compare keys in setContext and getContext

   Parent uses 'theme' (lowercase), child uses 'Theme' (capital T). Keys are case-sensitive.

2. Step 2: Effect of key mismatch

   Because keys differ, getContext returns undefined, causing unexpected behavior.

3. Final Answer:

   The key used in getContext has different capitalization than setContext -> Option D

4. Quick Check:

   Context keys are case-sensitive = A [OK]

Hint: Match context keys exactly, including case [OK]

Common Mistakes:

• Thinking setContext must be in onMount
• Believing getContext can't be used in children
• Assuming keys can be numbers only

5. In a nested Svelte component tree, how does context help when a deeply nested child needs data from a distant ancestor without prop drilling?

/* Grandparent.svelte */


/* Parent.svelte */



/* Child.svelte */

Why is this approach better than passing props through Parent.svelte?

hard

A. Because context automatically updates props in Parent.svelte

B. Because context duplicates data in every component for safety

C. Because context allows Child.svelte to access data directly without Parent.svelte needing to pass props

D. Because context requires less code but still passes props through Parent.svelte

Solution

1. Step 1: Understand nested component data flow

   Without context, data must be passed through Parent.svelte as props even if it doesn't use it.

2. Step 2: How context simplifies this

   Context lets Child.svelte get data directly from Grandparent.svelte, skipping Parent.svelte entirely.

3. Final Answer:

   Because context allows Child.svelte to access data directly without Parent.svelte needing to pass props -> Option C

4. Quick Check:

   Context skips intermediate props = B [OK]

Hint: Context skips intermediate components, direct data access [OK]

Common Mistakes:

• Thinking context updates props automatically
• Believing context duplicates data everywhere
• Assuming context still passes props through all components