Context vs Store in Svelte: Key Differences and When to Use Each

In Svelte, context is used to pass data down the component tree without prop drilling, scoped to component hierarchy, while stores provide reactive, global or shared state accessible anywhere. Use context for tightly coupled components and stores for app-wide or cross-component state management.

Quick Comparison

This table summarizes the main differences between context and store in Svelte.

Aspect	Context	Store
Purpose	Pass data down component tree without props	Manage reactive shared state across components
Scope	Limited to component subtree	Global or any component can subscribe
Reactivity	Not reactive by itself; must use reactive values	Built-in reactivity with subscriptions
Usage Complexity	Simple for parent-child or close components	Better for complex or app-wide state
API	setContext and getContext	writable, readable, derived stores
Typical Use Case	Theme, localization, or config per subtree	User data, UI state, or data fetched from API

Key Differences

Context in Svelte is designed to share data between a parent component and its descendants without passing props through every intermediate component. It works only within the component tree and is not reactive by itself, so you often pass reactive stores or values inside context to get reactivity.

On the other hand, stores are reactive objects that hold state and can be subscribed to by any component, regardless of their position in the component tree. Stores provide built-in reactivity, so when the store value changes, all subscribers update automatically.

Use context when you want to share data tightly scoped to a subtree, like theming or configuration that only some components need. Use stores when you need a global or shared reactive state accessible by many components, such as user authentication status or app settings.

Code Comparison

svelte

/* Using Context in Svelte */

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

  const theme = 'dark';
  setContext('theme', theme);
</script>

<Child />


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

<p>Theme from context: {theme}</p>

Output

Theme from context: dark

Store Equivalent

svelte

// store.js
import { writable } from 'svelte/store';
export const theme = writable('dark');

// Parent.svelte
<script>
  import { theme } from './store.js';
  import Child from './Child.svelte';
</script>

<Child />

// Child.svelte
<script>
  import { theme } from './store.js';
</script>

<p>Theme from store: {$theme}</p>

Output

Theme from store: dark

When to Use Which

Choose context when: you want to pass data or functions down a specific component subtree without prop drilling, especially for configuration or theming that does not need to be reactive by itself.

Choose stores when: you need reactive, shared state accessible by many components across different parts of your app, such as user info, UI state, or data fetched from APIs.

In short, use context for scoped, non-global data sharing and stores for global reactive state management.

Key Takeaways

Context shares data scoped to a component subtree without prop drilling but is not reactive by itself.

Stores provide reactive, global or shared state accessible by any component.

Use context for configuration or theming limited to certain components.

Use stores for app-wide reactive state like user data or UI state.

Combine context and stores by passing stores through context for scoped reactive data.