Derived stores in Svelte

Introduction

Derived stores let you create new values based on one or more existing stores. They update automatically when the original stores change.

You want to combine values from multiple stores into one value.

You need to transform or calculate a value from a store without changing the original.

You want to keep your UI in sync with related data automatically.

You want to avoid repeating the same calculation in many places.

You want to create a read-only store based on other stores.

Syntax

Svelte

import { derived } from 'svelte/store';

const derivedStore = derived(
  [store1, store2],
  ([$store1, $store2]) => $store1 + $store2,
  initialValue
);

You pass one or more stores as the first argument (array or single store).

The callback receives the current values of those stores and returns the new value.

Examples

Derived store double automatically doubles the value of count.

Svelte

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

const count = writable(2);
const double = derived(count, $count => $count * 2);

Derived store sum adds values from two stores a and b.

Svelte

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

const a = writable(3);
const b = writable(4);
const sum = derived([a, b], ([$a, $b]) => $a + $b);

Derived store greeting creates a greeting message from name.

Svelte

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

const name = writable('Alice');
const greeting = derived(name, $name => `Hello, ${$name}!`);

Sample Program

This example shows a writable store celsius and a derived store fahrenheit that converts the temperature. When celsius changes, fahrenheit updates automatically.

Svelte

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

// Create a writable store for temperature in Celsius
const celsius = writable(25);

// Create a derived store to convert Celsius to Fahrenheit
const fahrenheit = derived(celsius, $celsius => ($celsius * 9 / 5) + 32);

// Subscribe to both stores and log their values
celsius.subscribe(value => console.log(`Celsius: ${value}°C`));
fahrenheit.subscribe(value => console.log(`Fahrenheit: ${value}°F`));

// Change Celsius value to see automatic update
celsius.set(30);

Important Notes

Derived stores are read-only by default. You cannot set their value directly.

If you only use one store, you can pass it directly instead of an array.

Use derived stores to keep your data logic clean and avoid repeating calculations.

Summary

Derived stores create new values based on other stores.

They update automatically when the original stores change.

Use them to combine, transform, or calculate store data easily.

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