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.

Practice

1. What is the main purpose of a derived store in Svelte?

easy

A. To create a new store that automatically updates based on other stores

B. To store static values that never change

C. To replace writable stores with simpler syntax

D. To handle user input events directly

Solution

1. Step 1: Understand what derived stores do

   Derived stores create new values that depend on one or more other stores.

2. Step 2: Identify the main purpose

   They automatically update when the original stores change, reflecting combined or transformed data.

3. Final Answer:

   To create a new store that automatically updates based on other stores -> Option A

4. Quick Check:

   Derived stores update automatically = B [OK]

Hint: Derived stores react to other stores' changes automatically [OK]

Common Mistakes:

• Thinking derived stores hold static values
• Confusing derived with writable stores
• Believing derived stores handle events

2. Which of the following is the correct syntax to create a derived store from two stores a and b?

easy

A. const c = derived(a, b, (a, b) => a + b);

B. const c = derived([a, b], ([$a, $b]) => $a + $b);

C. const c = derived(a, (a, b) => a + b);

D. const c = derived([a, b], (a, b) => a + b);

Solution

1. Step 1: Recall derived store syntax

   Derived stores take an array of stores and a callback with destructured values.

2. Step 2: Match correct syntax

   The callback receives an array destructured as [$a, $b] to access current values.

3. Final Answer:

   const c = derived([a, b], ([$a, $b]) => $a + $b); -> Option B

4. Quick Check:

   Array + destructured callback = A [OK]

Hint: Use array and destructure values in derived callback [OK]

Common Mistakes:

• Passing stores as separate arguments instead of array
• Not destructuring the values in callback
• Using wrong parameter order in callback

3. Given the following code, what will be logged to the console after a.set(3) is called?

import { writable, derived } from 'svelte/store';
const a = writable(1);
const b = writable(2);
const sum = derived([a, b], ([$a, $b]) => $a + $b);
sum.subscribe(value => console.log(value));
a.set(3);

medium

A. 1, 2, 3

B. 3, 2, 5

C. 3, 5, 5

D. 3, 5

Solution

1. Step 1: Understand initial subscription output

   When subscribing, the current derived value is logged immediately: 1 + 2 = 3.

2. Step 2: Update store a to 3 and check derived value

   After a.set(3), derived recalculates: 3 + 2 = 5, which is logged.

3. Final Answer:

   3, 5 -> Option D

4. Quick Check:

   Initial + updated sum = 3, 5 [OK]

Hint: Derived logs initial and updated values on subscription [OK]

Common Mistakes:

• Expecting multiple logs before subscription
• Confusing store values with derived values
• Missing initial subscription log

4. What is wrong with this derived store code?

import { writable, derived } from 'svelte/store';
const count = writable(0);
const double = derived(count, value => value * 2, 0);

medium

A. There is no error; this code is correct

B. The callback function should destructure the value as an array

C. The derived store must be created from an array of stores, not a single store

D. The third argument (0) is invalid for derived stores

Solution

1. Step 1: Check derived store syntax for single store

   Derived stores can take a single store and a callback with the value directly.

2. Step 2: Understand the third argument

   The third argument is the initial value before the first store value arrives, which is valid.

3. Final Answer:

   There is no error; this code is correct -> Option A

4. Quick Check:

   Single store + initial value allowed = A [OK]

Hint: Single store derived can have initial value as third argument [OK]

Common Mistakes:

• Thinking callback must destructure array always
• Believing derived needs array even for one store
• Assuming third argument is invalid

5. You have two writable stores: firstName and lastName. You want to create a derived store fullName that updates automatically and trims whitespace from both names before combining. Which code correctly implements this?

hard

A. const fullName = derived([firstName, lastName], (firstName, lastName) => firstName.trim() + ' ' + lastName.trim());

B. const fullName = derived([firstName, lastName], ([$firstName, $lastName]) => $firstName + ' ' + $lastName);

C. const fullName = derived([firstName, lastName], ([$firstName, $lastName]) => `${$firstName.trim()} ${$lastName.trim()}`);

D. const fullName = derived(firstName, $firstName => $firstName.trim() + ' ' + lastName);

Solution

1. Step 1: Use array of stores and destructure values

   Derived stores with multiple sources require an array and destructuring in the callback.

2. Step 2: Trim both values before combining

   Use trim() on both $firstName and $lastName before concatenation.

3. Final Answer:

   const fullName = derived([firstName, lastName], ([$firstName, $lastName]) => `${$firstName.trim()} ${$lastName.trim()}`); -> Option C

4. Quick Check:

   Array + destructure + trim both = D [OK]

Hint: Destructure array stores and trim inside derived callback [OK]

Common Mistakes:

• Not trimming both names
• Passing stores separately, not as array
• Not destructuring values in callback