Context with stores in Svelte - Performance & Optimization

Performance: Context with stores

MEDIUM IMPACT

This affects how efficiently state is shared and updated across components without unnecessary DOM updates or re-renders.

Sharing reactive state across multiple nested components

Svelte

import { writable } from 'svelte/store';
import { setContext, getContext } from 'svelte';

const count = writable(0);
setContext('countStore', count);

// In nested components
const count = getContext('countStore');

Using context avoids prop drilling and limits re-renders to components that actually use the store.

📈 Performance Gainreduces re-renders to only subscribed components, improving input responsiveness

Sharing reactive state across multiple nested components

Svelte

import { writable } from 'svelte/store';
const count = writable(0);

// Passing store as a prop through many components
<ComponentA count={count} />

// Each intermediate component passes count down as prop

Passing stores through many props causes unnecessary re-renders and prop drilling, increasing DOM updates and slowing interaction.

📉 Performance Costtriggers multiple re-renders and prop updates for each intermediate component

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Passing stores via props through many components	Many prop updates and component re-renders	Multiple reflows triggered by each update	Higher paint cost due to repeated updates	[X] Bad
Providing stores via Svelte context	Only subscribed components update	Single reflow per store update	Lower paint cost due to targeted updates	[OK] Good

Rendering Pipeline

When a store value changes, only components subscribed to that store update. Using context to provide the store avoids unnecessary prop updates and reflows in intermediate components.

→JavaScript Execution

→Style Calculation

→Layout

→Paint

⚠️ BottleneckJavaScript Execution due to unnecessary component updates

Core Web Vital Affected

INP

This affects how efficiently state is shared and updated across components without unnecessary DOM updates or re-renders.

Optimization Tips

1Use Svelte context to provide stores to avoid prop drilling.

2Subscribe only in components that need the store to limit updates.

3Avoid passing stores through many intermediate components to reduce re-renders.

Performance Quiz - 3 Questions

What is a main performance benefit of using Svelte context to provide stores instead of passing them as props?

A It increases the bundle size significantly.

B It reduces unnecessary component re-renders by avoiding prop drilling.

C It triggers more layout recalculations.

D It disables reactive updates in components.

DevTools: Performance

How to check: Record a performance profile while interacting with the app. Look for excessive component updates or re-renders in the flame chart.

What to look for: Fewer component re-renders and shorter scripting times indicate better performance with context stores.