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

Challenge - 5 Problems

🧠 Conceptual

intermediate

How does Svelte context avoid prop drilling?

In Svelte, context lets components share data without passing props through every level. Why does this work?

A Context stores data globally accessible to all components without passing props explicitly.

B Context automatically passes props down only to direct children components.

C Context duplicates props at each level to avoid manual passing.

D Context requires manual prop passing but caches values for performance.

💡 Hint

Think about how context provides data access without needing to pass props through every component.

Svelte context stores data in a way that any component in the tree can access it directly, skipping the need to pass props through intermediate components. This avoids prop drilling.

❓ component_behavior

intermediate

What will this Svelte component output using context?

Given a parent component sets context with setContext('color', 'blue') and a child uses getContext('color'), what color will the child display?

Svelte

<script>
  import { setContext, getContext } from 'svelte';
  // Parent component
  setContext('color', 'blue');
</script>

<!-- Child component -->
<script>
  import { getContext } from 'svelte';
  const color = getContext('color');
</script>
<p>{color}</p>

A Error: context not found

B undefined

C null

D blue

💡 Hint

Remember that getContext retrieves the value set by setContext in an ancestor.

The child component accesses the 'color' value set by the parent using getContext. Since the parent set it to 'blue', the child displays 'blue'.

📝 Syntax

advanced

Identify the syntax error in Svelte context usage

Which option contains a syntax error when setting or getting context in Svelte?

A setContext('user', {name: 'Anna'}); const user = getContext('user');

B setContext(user, {name: 'Anna'}); const user = getContext('user');

C setContext('user', {name: 'Anna'}); const user = getContext(user);

D ;)'resu'(txetnoCteg = resu tsnoc ;)}'annA' :eman{ ,'resu'(txetnoCtes

💡 Hint

Check the types of arguments passed to setContext and getContext.

setContext requires the first argument to be a string key. Option B passes a variable user instead of a string, causing a syntax or runtime error.

❓ state_output

advanced

What is the output when context value changes in Svelte?

If a parent component sets context with a writable store and updates it, what will a child component using getContext show?

Svelte

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

  // Parent component
  const count = writable(0);
  setContext('count', count);

  // Later update
  count.set(5);
</script>

<!-- Child component -->
<script>
  import { getContext } from 'svelte';
  const count = getContext('count');
</script>
<p>{$count}</p>

A 0

B undefined

C 5

D Error: $count is not defined

💡 Hint

Consider how Svelte stores and reactivity work with context.

The child gets the writable store from context and subscribes to it with $count. Since the parent updated the store to 5, the child shows 5.

🔧 Debug

expert

Why does this Svelte child component fail to get context?

Given this code, why does the child component's getContext return undefined?

Svelte

<!-- Parent.svelte -->
<script>
  import Child from './Child.svelte';
  import { setContext, onMount } from 'svelte';
  setContext('theme', 'dark');
</script>
<Child />

<!-- Child.svelte -->
<script>
  import { getContext } from 'svelte';
  const theme = getContext('theme');
</script>
<p>{theme}</p>

A setContext was called outside the component function, so context is not set properly.

B Child component must import setContext, not getContext.

C The key 'theme' is misspelled in Child component.

D Context only works with stores, not strings.

💡 Hint

Think about when and where setContext should be called inside a Svelte component.

setContext must be called inside the component's script block during initialization. Calling it outside the component function means the context is not set in the component tree, so getContext returns undefined.