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.