Context API vs stores in Svelte - Practice Questions

Challenge - 5 Problems

🧠 Conceptual

intermediate

When to use Context API vs Stores in Svelte?

In Svelte, both Context API and stores help share data. Which situation best fits using the Context API instead of stores?

A Replacing all local component state with a single global store

B Sharing reactive data globally across many unrelated components

C Managing global state that updates frequently and triggers UI changes everywhere

D Sharing data deeply between nested components without needing reactivity outside those components

💡 Hint

Think about when you want to avoid global reactivity and only pass data down the component tree.

The Context API is best for passing data deeply down the component tree without making it reactive globally. Stores are better for global reactive state.

❓ component_behavior

intermediate

What happens when a Svelte store updates?

Given a Svelte writable store used in multiple components, what happens when the store's value changes?

Svelte

import { writable } from 'svelte/store';
const count = writable(0);

// Component A and Component B both subscribe to count

count.set(5);

A Only the component that called set() re-renders

B No components re-render until manually refreshed

C All components subscribed to the store re-render with the new value

D Only components that read the store inside onMount re-render

💡 Hint

Stores in Svelte are reactive and notify all subscribers on change.

When a store updates, all components subscribed to it automatically update their UI to reflect the new value.

🔧 Debug

advanced

Why does this Context API example fail to share data?

Consider this Svelte code using Context API. Why does the child component not receive the context value?

Svelte

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

  // Parent.svelte
  setContext('user', { name: 'Alice' });
</script>

<!-- Child.svelte -->
<script>
  const user = getContext('user');
</script>
<p>{user.name}</p>

A Context API only works with stores, not plain objects

B setContext must be called inside a component script, not at module top-level

C getContext key must be a Symbol, not a string

D Child component must import setContext instead of getContext

💡 Hint

Check where setContext is called in the component lifecycle.

setContext must be called inside the component's script block (not at module top-level) so it runs during component initialization and sets context properly.

📝 Syntax

advanced

Which Svelte store syntax correctly creates a readable store with a cleanup function?

Choose the correct syntax to create a readable store that starts a timer and cleans up on unsubscribe.

A

import { readable } from 'svelte/store';
const time = readable(new Date(), set => {
  const interval = setInterval(() => set(new Date()), 1000);
  return () => clearInterval(interval);
});

B

import { writable } from 'svelte/store';
const time = writable(new Date(), set => {
  const interval = setInterval(() => set(new Date()), 1000);
  return () => clearInterval(interval);
});

C

import { readable } from 'svelte/store';
const time = readable(new Date(), () => {
  const interval = setInterval(() => set(new Date()), 1000);
  return () => clearInterval(interval);
});

D

import { readable } from 'svelte/store';
const time = readable(new Date(), set => {
  setInterval(() => set(new Date()), 1000);
});

💡 Hint

Remember the readable store callback receives a set function and must return a cleanup function.

Option A correctly uses readable with a set callback and returns a cleanup function to clear the interval.

❓ state_output

expert

What is the output after updating a nested store value in Svelte?

Given this Svelte writable store holding an object, what is the output after updating a nested property incorrectly?

Svelte

import { writable } from 'svelte/store';

const user = writable({ name: 'Bob', age: 30 });

user.update(u => {
  u.age = 31;
  return u;
});

let currentAge;
user.subscribe(value => currentAge = value.age)();

console.log(currentAge);

A 31

B 30

C undefined

D Throws a TypeError

💡 Hint

Consider how Svelte detects changes in store values and if mutating nested objects works.

Even though the object is mutated, returning the same object triggers subscribers. So currentAge becomes 31.

Practice

1. Which statement best describes the main difference between Svelte's Context API and stores?

easy

A. Context API is used for styling components, stores manage component lifecycle.

B. Stores are only for passing data from parent to child, Context API is for global state.

C. Context API shares data only between parent and child components, while stores provide global reactive state accessible anywhere.

D. Stores and Context API are identical in functionality and usage.

Solution

1. Step 1: Understand Context API scope

   Context API shares data only between parent and its children components, not globally.

2. Step 2: Understand stores scope

   Stores provide reactive global state accessible from any component in the app.

3. Final Answer:

   Context API shares data only between parent and child components, while stores provide global reactive state accessible anywhere. -> Option C

4. Quick Check:

   Context API = parent-child, stores = global state [OK]

Hint: Context API is local parent-child, stores are global [OK]

Common Mistakes:

• Thinking stores only pass data down like props
• Confusing Context API with global state management
• Assuming stores are for styling or lifecycle

2. Which of the following is the correct way to set a value in a Svelte writable store?

easy

A. store.set(newValue);

B. store.value = newValue;

C. store.update(newValue);

D. store.change(newValue);

Solution

1. Step 1: Recall writable store methods

   Svelte writable stores have a set() method to assign a new value.

2. Step 2: Check other options

   store.value is not valid, update() takes a function, change() does not exist.

3. Final Answer:

   store.set(newValue); -> Option A

4. Quick Check:

   Use set() to assign store value [OK]

Hint: Use store.set(value) to update writable stores [OK]

Common Mistakes:

• Trying to assign store.value directly
• Using update() with a value instead of a function
• Using non-existent methods like change()

3. Given this Svelte code using Context API:

import { setContext, getContext } from 'svelte';

// Parent.svelte
setContext('color', 'blue');

// Child.svelte
const color = getContext('color');

What will color be inside Child.svelte?

medium

A. Throws an error

B. undefined

C. null

D. 'blue'

Solution

1. Step 1: Understand setContext and getContext

   setContext('color', 'blue') sets a value accessible to child components via getContext('color').

2. Step 2: Check child access

   Child.svelte calls getContext('color') and receives 'blue' because it is a child of the parent setting the context.

3. Final Answer:

   'blue' -> Option D

4. Quick Check:

   Context API passes 'blue' from parent to child [OK]

Hint: getContext returns parent's setContext value [OK]

Common Mistakes:

• Expecting undefined if not wrapped properly
• Confusing context keys or forgetting to setContext
• Assuming context works globally like stores

4. What is wrong with this Svelte store usage?

import { writable } from 'svelte/store';

const count = writable(0);

function increment() {
  count = count + 1;
}

medium

A. writable stores cannot hold numbers.

B. You cannot reassign the store variable; must use count.update() or count.set().

C. The import statement is incorrect.

D. The function increment should be async.

Solution

1. Step 1: Identify store usage error

   The code tries to do count = count + 1, which reassigns the store variable instead of updating its value.

2. Step 2: Correct way to update store

   Use count.update(n => n + 1) or count.set(newValue) to change the store's value reactively.

3. Final Answer:

   You cannot reassign the store variable; must use count.update() or count.set(). -> Option B

4. Quick Check:

   Update store with update() or set(), not reassignment [OK]

Hint: Use update() or set(), never reassign store variable [OK]

Common Mistakes:

• Trying to assign store variable directly
• Ignoring reactive update methods
• Thinking writable stores can't hold numbers

5. You want to share a theme color across your entire Svelte app and reactively update it from any component. Which approach is best and why?

hard

A. Use a writable store for the theme color because stores provide reactive global state accessible anywhere.

B. Use Context API because it automatically updates all components globally.

C. Pass the theme color as a prop to every component manually.

D. Use a local variable in each component to store the theme color.

Solution

1. Step 1: Identify requirement for global reactive state

   The theme color must be shared app-wide and update reactively from any component.

2. Step 2: Compare Context API and stores

   Context API only shares data between parent and children, not globally. Stores provide reactive global state accessible anywhere.

3. Final Answer:

   Use a writable store for the theme color because stores provide reactive global state accessible anywhere. -> Option A

4. Quick Check:

   Global reactive state needs stores, not Context API [OK]

Hint: Global reactive state? Use stores, not Context API [OK]

Common Mistakes:

• Choosing Context API for global state
• Passing props everywhere manually
• Using local variables that don't sync