Context API vs stores in Svelte - Performance Comparison

Performance: Context API vs stores

MEDIUM IMPACT

This affects how state updates propagate and how many components re-render, impacting interaction responsiveness and rendering speed.

Sharing reactive state across many components

Svelte

import { writable } from 'svelte/store';

// store.js
export const userStore = writable(null);

// Any component
import { userStore } from './store.js';

// Use $userStore in markup

Stores provide built-in subscription management and fine-grained reactivity, so only components using the store re-render when relevant data changes.

📈 Performance GainReduces unnecessary re-renders and layout recalculations, improving interaction responsiveness.

Sharing reactive state across many components

Svelte

import { setContext, getContext } from 'svelte';

// Parent.svelte
setContext('user', userStore);

// Child.svelte
const user = getContext('user');

// Child uses $user directly in markup

Context API passes the store reference but does not optimize reactivity; every getContext consumer re-renders on any store change, causing many updates.

📉 Performance CostTriggers re-render in all consuming components on every store update, causing multiple layout recalculations.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Context API with reactive stores	High - many components subscribe	Multiple reflows per update	High paint cost due to frequent updates	[X] Bad
Svelte stores with selective subscriptions	Low - only subscribed components update	Single or minimal reflows	Lower paint cost	[OK] Good
Context API for static data	Minimal DOM operations	No reflows triggered by context	Minimal paint cost	[OK] Good

Rendering Pipeline

State changes in stores trigger reactive updates that flow through Svelte's compiler-generated code, causing component re-renders and browser layout recalculations. Context API passes data references without reactive subscriptions, so updates depend on manual triggers.

→JavaScript Execution

→Style Calculation

→Layout

→Paint

⚠️ BottleneckLayout stage due to multiple component re-renders from broad store subscriptions.

Core Web Vital Affected

INP

This affects how state updates propagate and how many components re-render, impacting interaction responsiveness and rendering speed.

Optimization Tips

1Use Svelte stores for reactive state shared across components to minimize re-renders.

2Use Context API for static or rarely changing data to avoid subscription overhead.

3Avoid passing stores via context to many components to prevent excessive layout recalculations.

Performance Quiz - 3 Questions

Which pattern reduces unnecessary component re-renders when sharing reactive state in Svelte?

A Using global variables without reactivity

B Passing stores via Context API to all components

C Using Svelte stores with selective subscriptions

D Duplicating state in each component

DevTools: Performance

How to check: Record a performance profile while interacting with the app. Look for scripting and rendering times when state updates occur.

What to look for: High scripting time and multiple layout recalculations indicate inefficient state propagation. Efficient patterns show minimal reflows and faster interaction response.

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