Derived stores in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Svelte derived store example?

Consider the following Svelte code using derived stores:

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

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

let output = '';
double.subscribe(value => {
  output = `Value is ${value}`;
});

count.set(5);

What is the final value of output after count.set(5)?

Svelte

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

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

let output = '';
double.subscribe(value => {
  output = `Value is ${value}`;
});

count.set(5);

A "Value is 10"

B "Value is 2"

C "Value is 4"

D "Value is 5"

💡 Hint

Remember that the derived store updates when the original store changes.

The double store is derived by multiplying the count store's value by 2. Initially, count is 2, so double is 4. After count.set(5), double updates to 10, so output becomes "Value is 10".

❓ state_output

intermediate

What is the value of sum after these updates?

Given these Svelte stores:

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

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

let currentSum;
sum.subscribe(value => currentSum = value);

a.set(5);
b.set(10);

What is the final value of currentSum?

Svelte

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

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

let currentSum;
sum.subscribe(value => currentSum = value);

a.set(5);
b.set(10);

A 5

B 15

C 7

D 10

💡 Hint

Both a and b change before you check currentSum.

The derived store sum adds the current values of a and b. After setting a to 5 and b to 10, the sum is 15.

📝 Syntax

advanced

Which option correctly creates a derived store from two writable stores?

Choose the correct syntax to create a derived store fullName from two writable stores firstName and lastName that concatenates them with a space.

Svelte

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

const firstName = writable('John');
const lastName = writable('Doe');

// Which option correctly defines fullName?

A const fullName = derived([firstName, lastName], ($first, $last) => `${$first} ${$last}`);

B const fullName = derived(firstName, lastName, ($first, $last) => `${$first} ${$last}`);

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

D const fullName = derived(firstName, ($first) => `${$first} ${lastName}`);

💡 Hint

Derived stores from multiple stores use an array as the first argument and a function with an array destructuring as the second.

Option C correctly uses an array of stores and destructures their values in the callback. Option C and C have wrong argument structures. Option C only derives from one store and uses the store object instead of its value.

🔧 Debug

advanced

Why does this derived store not update as expected?

Look at this Svelte code:

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

const count = writable(1);
const double = derived(count, $count => {
  count.set($count * 2);
  return $count * 2;
});

double.subscribe(value => console.log(value));
count.set(3);

What problem does this code cause?

Svelte

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

const count = writable(1);
const double = derived(count, $count => {
  count.set($count * 2);
  return $count * 2;
});

double.subscribe(value => console.log(value));
count.set(3);

A It causes an infinite loop because the derived store sets the original store inside its callback.

B It works fine and logs 6 once.

C It throws a syntax error due to invalid callback.

D It logs 3 and then stops without updating.

💡 Hint

Think about what happens when a store updates inside its own derived callback.

The derived store callback sets the original store, which triggers the derived store again, causing an infinite loop of updates.

🧠 Conceptual

expert

How many times does the derived store callback run in this scenario?

Given these stores:

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

const x = writable(1);
const y = writable(2);

const sum = derived([x, y], ([$x, $y], { set }) => {
  set($x + $y);
});

let count = 0;
sum.subscribe(() => count++);

x.set(3);
y.set(4);
x.set(5);

How many times is the derived store callback executed?

Svelte

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

const x = writable(1);
const y = writable(2);

const sum = derived([x, y], ([$x, $y], { set }) => {
  set($x + $y);
});

let count = 0;
sum.subscribe(() => count++);

x.set(3);
y.set(4);
x.set(5);

A 2

B 3

C 5

D 4

💡 Hint

Remember the derived store runs once initially and then on every change of any dependency.

The derived store callback runs once on subscription (initial), then once for each set call on x or y. There are 3 sets after subscription, so total 4 times.

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