getContext in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What does this Svelte component output when using getContext?

Consider a parent component that sets a context value and a child component that uses getContext to access it. What will the child component display?

Svelte

/* Parent.svelte */
<script>
  import Child from './Child.svelte';
  import { setContext } from 'svelte';
  setContext('color', 'blue');
</script>
<Child />

/* Child.svelte */
<script>
  import { getContext } from 'svelte';
  const color = getContext('color');
</script>
<p>The color is {color}</p>

A Runtime error: getContext called outside component

B The color is undefined

C The color is null

D The color is blue

💡 Hint

Remember that setContext shares data with child components using the same key.

The parent uses setContext('color', 'blue') to provide the value 'blue'. The child uses getContext('color') to retrieve it, so it displays 'The color is blue'.

❓ state_output

intermediate

What is the value of variable 'theme' after running this Svelte code?

Given this Svelte component code, what is the value of theme?

Svelte

<script>
  import { getContext } from 'svelte';
  const theme = getContext('theme') ?? 'light';
</script>

A undefined

B 'dark'

C 'light'

D Throws ReferenceError

💡 Hint

If no context is set for the key, the fallback value after ?? is used.

No parent component set a context for 'theme', so getContext('theme') returns undefined. The nullish coalescing operator ?? then assigns 'light'.

📝 Syntax

advanced

Which option correctly uses getContext in a Svelte component?

Choose the code snippet that correctly uses getContext to retrieve a value in a Svelte component.

A <script>import { getContext } from 'svelte'; const value = getContext('key');</script>

B <script>import { getContext } from 'svelte'; const value = getContext();</script>

C <script>import { getContext } from 'svelte'; const value = getContext(key);</script>

D <script>import { getContext } from 'svelte'; const value = getContext['key'];</script>

💡 Hint

getContext requires a string key as an argument.

Option A correctly calls getContext with a string key. Option A misses the argument, C uses an undefined variable key, and D uses incorrect syntax.

🔧 Debug

advanced

What error occurs when calling getContext with a key not set by any parent?

What happens if a Svelte component calls getContext('missingKey') but no parent component has set this context?

Svelte

<script>
  import { getContext } from 'svelte';
  const value = getContext('missingKey');
</script>

A Throws ReferenceError

B Returns undefined without error

C Throws TypeError

D Returns null

💡 Hint

Check what getContext returns if no context is found.

If no context is set for the key, getContext returns undefined silently without throwing an error.

🧠 Conceptual

expert

Why use getContext instead of props in Svelte?

Which reason best explains why a developer would use getContext instead of passing data via props?

A To share data deeply without passing props through every intermediate component

B To allow components to modify parent state directly

C To make components re-render faster by avoiding props

D To automatically bind events between components

💡 Hint

Think about how data flows through nested components.

getContext allows sharing data with deeply nested components without manually passing props through each level, simplifying code and improving maintainability.