setContext in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Svelte code using setContext and getContext?

Consider a parent component that uses setContext to share a value, and a child component that uses getContext to access it. What will the child display?

Svelte

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

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

A The child component throws a runtime error

B The child component displays: undefined

C The child component displays: blue

D The child component displays: null

💡 Hint

Remember that setContext shares data with descendants, and getContext retrieves it.

The setContext function sets a value with a key that descendants can access using getContext. Here, the child gets the string 'blue' and displays it.

❓ state_output

intermediate

What is the value of the variable after using setContext and getContext with reactive stores?

In Svelte, if a parent sets a writable store in context and the child subscribes to it, what will the child display after the store updates?

Svelte

/* Parent.svelte */
<script>
  import { setContext } from 'svelte';
  import { writable } from 'svelte/store';
  import Child from './Child.svelte';

  const count = writable(0);
  setContext('count', count);

  setTimeout(() => count.set(5), 100);
</script>
<Child />

/* Child.svelte */
<script>
  import { getContext } from 'svelte';
  const count = getContext('count');
  let value = 0;
  const unsubscribe = count.subscribe(v => value = v);
  // Optional: unsubscribe on destroy
</script>
<p>{value}</p>

A Initially 0, then updates to 5 after 100ms

B Initially 5, then updates to 0 after 100ms

C Always 0, does not update

D Throws an error because stores cannot be passed via context

💡 Hint

Writable stores are reactive and can be shared via context.

The parent sets a writable store in context. The child subscribes to it and updates its local variable when the store changes. After 100ms, the store updates to 5, so the child shows 5.

📝 Syntax

advanced

Which option correctly uses setContext in a Svelte component?

Choose the code snippet that correctly sets a context value in a Svelte component.

A <script>import { setContext } from 'svelte'; setContext('key' 123);</script>

B <script>import { setContext } from 'svelte'; setContext('key', 123);</script>

C <script>import { setContext } from 'svelte'; setContext('key');</script>

D <script>import { setContext } from 'svelte'; setContext(123, 'key');</script>

💡 Hint

Check the function signature: setContext(key, value).

The setContext function requires two arguments: a key and a value. Option B correctly passes both.

🔧 Debug

advanced

Why does this Svelte child component get undefined from getContext?

A parent sets context with setContext('user', {name: 'Anna'}). The child calls getContext('user') but gets undefined. What is the most likely reason?

Svelte

/* Parent.svelte */
<script>
  import { setContext } from 'svelte';
  import Child from './Child.svelte';
  setContext('user', {name: 'Anna'});
</script>
<Child />

/* Child.svelte */
<script>
  import { getContext } from 'svelte';
  const user = getContext('user');
</script>
<p>{user?.name}</p>

A The child is not a descendant of the parent component that called setContext

B setContext must be called inside onMount lifecycle

C The key 'user' is misspelled in the child component

D getContext only works with primitive values, not objects

💡 Hint

Context only works down the component tree.

If the child is not a descendant of the component that called setContext, it will get undefined. The key and value types are correct, and setContext can be called anywhere in the component script.

🧠 Conceptual

expert

How does Svelte's setContext differ from React's Context API in component communication?

Choose the statement that best describes a key difference between Svelte's setContext and React's Context API.

A Svelte's setContext automatically updates all components on data change, React's Context requires manual subscription

B Svelte's setContext shares data only with direct descendants, React's Context can be accessed by any nested component regardless of depth

C Svelte's setContext requires a store to share data, React's Context only shares static values

D Svelte's setContext is synchronous and scoped to a component subtree, React's Context uses a Provider component and can trigger re-renders on consumers

💡 Hint

Think about how data flows and updates happen in both frameworks.

Svelte's setContext shares data synchronously within a component subtree and does not itself trigger reactive updates; reactivity depends on the data passed (like stores). React's Context uses a Provider component and triggers re-renders in consumers when the context value changes.