Context API vs stores in Svelte - Quick Revision & Key Differences

Recall & Review

beginner

What is the main purpose of the Context API in Svelte?

The Context API in Svelte is used to pass data or functions down the component tree without manually passing props at every level. It helps share data between parent and deeply nested child components.

beginner

What are Svelte stores used for?

Svelte stores hold reactive data that can be shared and updated across multiple components. They allow components to subscribe and react automatically when the store's data changes.

intermediate

How does the Context API differ from stores in Svelte?

Context API shares data only within a component subtree and requires explicit setting and getting. Stores are global reactive objects that any component can subscribe to, making them better for app-wide state.

beginner

Can Svelte stores be used without the Context API?

Yes, Svelte stores are independent and can be imported and used directly in any component without needing the Context API. They provide a simple way to share reactive state globally.

intermediate

When should you prefer Context API over stores in Svelte?

Use Context API when you want to share data only within a specific component subtree and avoid global state. It is good for passing data like themes or configuration down a limited part of the app.

What is a key feature of Svelte stores?

A They only work inside a single component

B They are used only for styling components

C They replace the need for props completely

D They provide reactive data that components can subscribe to

Svelte stores hold reactive data that components can subscribe to and update automatically.

What does the Context API in Svelte help with?

A Passing data down a component tree without props

B Creating global CSS styles

C Managing HTTP requests

D Building animations

Context API allows passing data or functions down the component tree without manually passing props at every level.

Which is true about Svelte stores compared to Context API?

A Stores are global and reactive, Context API is subtree-limited

B Stores cannot be reactive

C Context API is global and reactive

D Stores require manual prop passing

Stores provide global reactive state, while Context API shares data only within a component subtree.

Can you use Svelte stores without Context API?

A Only if you use class components

B No, stores require Context API

C Yes, stores can be imported and used directly

D Only for styling purposes

Svelte stores are independent and can be used directly in any component.

When is Context API preferred over stores?

A When you want to fetch data from APIs

B When sharing data only within a specific component subtree

C When you want to style components

D When you want global app state

Context API is best for sharing data limited to a component subtree, avoiding global state.

Explain the difference between Svelte's Context API and stores. When would you use each?

Think about scope and reactivity differences.

Describe how you would share a theme color across components using Context API and stores in Svelte.

Consider how data flows in each method.

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