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.