Store vs Context in Svelte: Key Differences and Usage Guide

In Svelte, stores provide a reactive way to share state globally or across components, while context allows passing data down the component tree without prop drilling. Stores are ideal for app-wide state, and context is best for tightly coupled parent-child communication.

Quick Comparison

Here is a quick overview comparing store and context in Svelte based on key factors.

Factor	Store	Context
Scope	Global or any component subscribing	Limited to component subtree
Reactivity	Built-in reactive subscriptions	No built-in reactivity, manual updates needed
Usage	Shared state across unrelated components	Passing data from parent to descendants
API	writable, readable, derived	setContext, getContext
Best for	App-wide or cross-component state	Avoiding prop drilling in nested components
Performance	Efficient updates via subscriptions	No overhead but manual control

Key Differences

Stores in Svelte are reactive objects that hold state and notify subscribers automatically when the state changes. They are designed for sharing data across any components, even if they are not directly related in the component tree. Stores come with built-in methods like writable and readable to create reactive state containers.

On the other hand, context is a way to pass data down the component tree without passing props at every level. It uses setContext in a parent component and getContext in descendants. Context is not reactive by itself, so if the data changes, you must handle updates manually or combine it with stores.

In summary, stores provide a reactive, global-like state management solution, while context is a lightweight, local mechanism for passing data deeply in the component hierarchy without prop drilling.

Code Comparison

This example shows how to share a counter value using a writable store in Svelte.

svelte

import { writable } from 'svelte/store';

// store.js
export const counter = writable(0);

// ComponentA.svelte
<script>
  import { counter } from './store.js';
  function increment() {
    counter.update(n => n + 1);
  }
</script>
<button on:click={increment}>Increment</button>

// ComponentB.svelte
<script>
  import { counter } from './store.js';
</script>
<p>Counter value: {$counter}</p>

Output

A button labeled 'Increment' that increases the counter value displayed below it each time it is clicked.

Context Equivalent

This example shows how to pass the same counter value using setContext and getContext in Svelte.

svelte

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

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

  function increment() {
    counter.update(n => n + 1);
  }
</script>
<button on:click={increment}>Increment</button>
<slot></slot>

<!-- Child.svelte -->
<script>
  import { getContext } from 'svelte';
  const counter = getContext('counter');
</script>
<p>Counter value: {$counter}</p>

Output

A button labeled 'Increment' in the parent that increases the counter value shown in the child component below it.

When to Use Which

Choose store when you need reactive state shared across many components that may not be directly related or nested. Stores are perfect for global app state like user data, themes, or settings.

Choose context when you want to avoid passing props through many layers of components and the data is only relevant within a specific subtree. Context is ideal for tightly coupled parent-child communication or theming within a section.

Using stores with context together is also common: context can provide a store instance to descendants, combining both benefits.

Key Takeaways

Stores provide reactive, global or cross-component state sharing with automatic updates.

Context passes data down the component tree without prop drilling but lacks built-in reactivity.

Use stores for app-wide or unrelated component state, and context for local parent-to-child data.

Context can hold stores to combine local scope with reactivity.

Stores simplify state management; context is lightweight for nested component communication.