Derived stores in Svelte - Performance & Optimization

Performance: Derived stores

MEDIUM IMPACT

Derived stores affect how reactive data updates propagate and how often components re-render, impacting interaction responsiveness and rendering speed.

Creating a reactive value based on multiple stores

Svelte

import { derived, writable } from 'svelte/store';

const storeA = writable(0);
const storeB = writable(0);

let timeout;

const derivedStore = derived([storeA, storeB], ([$storeA, $storeB], set) => {
  // debounce or throttle expensive calculation
  if (timeout) clearTimeout(timeout);
  timeout = setTimeout(() => {
    let result = 0;
    for (let i = 0; i < 100000; i++) {
      result += $storeA * $storeB * i;
    }
    set(result);
  }, 50);

  return () => {
    if (timeout) {
      clearTimeout(timeout);
      timeout = null;
    }
  };
});

Delays expensive recalculation to batch rapid changes, reducing unnecessary recalculations and improving responsiveness.

📈 Performance GainReduces recalculations by batching, lowering main thread blocking and improving interaction speed.

Creating a reactive value based on multiple stores

Svelte

import { derived, writable } from 'svelte/store';

const storeA = writable(0);
const storeB = writable(0);

const derivedStore = derived([storeA, storeB], ([$storeA, $storeB]) => {
  // expensive calculation on every change
  let result = 0;
  for (let i = 0; i < 100000; i++) {
    result += $storeA * $storeB * i;
  }
  return result;
});

The derived store recalculates an expensive operation every time any dependency changes, even if the result is not used immediately.

📉 Performance CostBlocks main thread for tens of milliseconds on each update, causing input lag and slower UI responsiveness.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Derived store with expensive calculation on every update	Minimal DOM changes	Triggers multiple reflows if UI updates	High paint cost due to slow JS	[X] Bad
Derived store with debounced expensive calculation	Minimal DOM changes	Single reflow per batch update	Lower paint cost due to less frequent JS work	[OK] Good

Rendering Pipeline

Derived stores trigger reactive updates that flow through Svelte's reactive system, causing component re-renders when their values change.

→JavaScript Execution

→Style Calculation

→Layout

→Paint

⚠️ BottleneckJavaScript Execution due to expensive recalculations in derived stores

Core Web Vital Affected

INP

Derived stores affect how reactive data updates propagate and how often components re-render, impacting interaction responsiveness and rendering speed.

Optimization Tips

1Avoid heavy computations directly inside derived stores without batching.

2Use debouncing or throttling to limit recalculation frequency.

3Keep derived store dependencies minimal to reduce unnecessary updates.

Performance Quiz - 3 Questions

What is the main performance risk when using derived stores with expensive calculations?

A Blocking the main thread with frequent recalculations

B Increasing bundle size significantly

C Causing layout shifts (CLS)

D Delaying initial page load (LCP)

DevTools: Performance

How to check: Record a performance profile while interacting with the app. Look for long scripting tasks caused by derived store recalculations.

What to look for: Look for long 'Scripting' tasks blocking main thread and causing input delay; check if derived store calculations appear frequently.