Context vs stores decision in Svelte - Hands-On Comparison

Context vs Stores Decision in Svelte

📖 Scenario: You are building a simple Svelte app that shares a user's theme preference (light or dark) across components.You want to learn when to use context and when to use stores in Svelte for sharing data.

🎯 Goal: Create a Svelte app that sets up a theme preference using context in one component and a store in another. Then decide which method is better for sharing the theme across multiple components.

📋 What You'll Learn

Create a Svelte component that sets a theme value using setContext

Create a Svelte component that creates a writable store for theme

Access the theme value using getContext in a child component

Subscribe to the theme store in another component

Add a button to toggle the theme between 'light' and 'dark'

Explain which method is better for global theme sharing

💡 Why This Matters

🌍 Real World

Sharing theme or user preferences across many components in a Svelte app is common. Choosing between context and stores affects app design and reactivity.

💼 Career

Understanding when to use context vs stores helps you build scalable Svelte apps and collaborate with teams on state management.

1

Set up theme context in a parent component

In a Svelte component called ThemeContextProvider.svelte, import setContext from 'svelte'. Create a variable theme set to the string 'light'. Use setContext with the key 'theme' and the value theme. This will share the theme using context.

Svelte

// Your code here

  // Import setContext
  // Create theme variable
  // Use setContext with key 'theme' and value theme

Hint

Use setContext('theme', theme) to share the theme string.

2

Create a writable store for theme

In a new file called themeStore.js, import writable from 'svelte/store'. Create a writable store named themeStore with initial value 'light'. Export themeStore.

Svelte

// Your code here
// Import writable
// Create themeStore with 'light'
// Export themeStore

Hint

Use writable('light') to create the store.

3

Access theme from context in a child component

In a Svelte component called ThemeConsumer.svelte, import getContext from 'svelte'. Use getContext with the key 'theme' to get the theme value into a variable called theme. Display the theme inside a <p> tag.

Svelte

// Your code here

  // Import getContext
  // Get theme from context

{theme}

Hint

Use getContext('theme') to access the shared theme.

4

Subscribe to theme store and toggle theme

In a Svelte component called ThemeStoreConsumer.svelte, import themeStore from './themeStore.js'. Use the $themeStore auto-subscription to display the current theme inside a <p> tag. Add a button that toggles the theme between 'light' and 'dark' by calling themeStore.set().

Svelte

// Your code here

  // Import themeStore
  // Create toggleTheme function

{ $themeStore }
Toggle Theme

Hint

Use $themeStore to auto-subscribe and themeStore.update() to toggle.

Practice

1. In Svelte, when should you use context instead of stores?

easy

A. To manage asynchronous data fetching

B. To share data only between a parent and its child components locally

C. To share reactive data globally across unrelated components

D. To create CSS styles scoped to a component

Solution

1. Step 1: Understand context usage

   Context is designed to share data locally down the component tree without passing props explicitly.

2. Step 2: Compare with stores

   Stores are for global reactive data accessible anywhere by importing, not limited to parent-child.

3. Final Answer:

   To share data only between a parent and its child components locally -> Option B

4. Quick Check:

   Context = local sharing [OK]

Hint: Context is for local, stores for global reactive data [OK]

Common Mistakes:

• Using stores for local-only data sharing
• Confusing context with global state management
• Thinking context is reactive globally
• Using context for styling or async tasks

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

easy

A. import { createContext } from 'svelte'; createContext('key', value);

B. import { useContext } from 'svelte'; useContext('key', value);

C. import { setContext } from 'svelte'; setContext('key', value);

D. import { setStore } from 'svelte'; setStore('key', value);

Solution

1. Step 1: Recall Svelte context API

   Svelte uses setContext to provide a value to child components.

2. Step 2: Check import and usage

   The correct import is from 'svelte' and the function is setContext with key and value.

3. Final Answer:

   import { setContext } from 'svelte'; setContext('key', value); -> Option C

4. Quick Check:

   setContext = provide context [OK]

Hint: Use setContext to provide data down the tree [OK]

Common Mistakes:

• Using createContext or useContext which are React terms
• Trying to set stores with setContext
• Wrong import paths or function names
• Confusing setContext with reactive stores

3. Given this Svelte code, what will be logged to the console?

import { writable } from 'svelte/store';

const count = writable(0);

count.subscribe(value => console.log(value));

count.set(5);
count.update(n => n + 1);

medium

A. [0, 5, 6]

B. [5, 6]

C. [0, 1, 5]

D. [1, 5, 6]

Solution

1. Step 1: Understand initial subscription call

   Subscribing to a writable store immediately calls the callback with the current value, which is 0.

2. Step 2: Trace set and update calls

   Then count.set(5) triggers callback with 5, and count.update(n => n + 1) triggers callback with 6.

3. Final Answer:

   [0, 5, 6] -> Option A

4. Quick Check:

   Subscription calls on current and changes [OK]

Hint: Subscription logs current value immediately [OK]

Common Mistakes:

• Ignoring initial subscription call
• Mixing order of set and update
• Assuming update starts from 0 after set
• Confusing subscribe behavior with events

4. What is wrong with this Svelte code snippet that tries to share data using context?

import { getContext } from 'svelte';

const value = getContext('user');

console.log(value);

medium

A. It tries to get context outside a component setup, causing undefined

B. It uses getContext instead of setContext to provide data

C. The key 'user' must be an object, not a string

D. getContext requires two arguments, key and default value

Solution

1. Step 1: Check context usage location

   getContext must be called inside a component's script during initialization, not in a module scope.

2. Step 2: Understand consequence

   Calling it outside component setup returns undefined because no context is set yet.

3. Final Answer:

   It tries to get context outside a component setup, causing undefined -> Option A

4. Quick Check:

   getContext only works inside component setup [OK]

Hint: Use getContext only inside component scripts [OK]

Common Mistakes:

• Calling getContext in module scope
• Confusing getContext with setContext usage
• Assuming string keys must be objects
• Expecting getContext to have default value argument

5. You want to share a reactive theme color across many unrelated components in a Svelte app. Which approach is best and why?

hard

A. Use a global variable for shared data

B. Use context API for local tree sharing

C. Pass props through all components manually

D. Use a writable store for global reactive data

Solution

1. Step 1: Identify sharing scope

   The theme color must be shared globally across unrelated components, not just parent-child.

2. Step 2: Choose reactive global sharing

   Writable stores provide reactive global state accessible by importing anywhere.

3. Step 3: Evaluate other options

   Context is local only, props are tedious for many components, global variables lack reactivity.

4. Final Answer:

   Use a writable store for global reactive data -> Option D

5. Quick Check:

   Stores = global reactive sharing [OK]

Hint: Use stores for global reactive data, context for local only [OK]

Common Mistakes:

• Using context for global sharing
• Passing props through many unrelated components
• Using global variables without reactivity
• Ignoring reactivity needs for theme changes