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.