Derived stores in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the function needed to create a derived store in Svelte.

Svelte

import { [1] } from 'svelte/store';

Drag options to blanks, or click blank then click option'

Aderived

Bwritable

Creadable

Dsubscribe

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'writable' instead of 'derived' because writable creates independent stores.

Using 'subscribe' which is a method, not a store creator.

The derived function is used to create a store that depends on other stores.

2fill in blank

medium

Complete the code to create a derived store that doubles the value of a writable store named 'count'.

Svelte

const doubled = derived(count, $count => $count [1] 2);

Drag options to blanks, or click blank then click option'

A/

B+

C*

D-

Attempts:

3 left

💡 Hint

Common Mistakes

Using '+' which adds instead of multiplying.

Using '-' or '/' which do not double the value.

The derived store multiplies the value by 2, so the operator is *.

3fill in blank

hard

Fix the error in the derived store callback to correctly access the value of the store.

Svelte

const doubled = derived(count, [1] => [1] * 2);

Drag options to blanks, or click blank then click option'

Astore

Bcount

Cvalue

D$count

Attempts:

3 left

💡 Hint

Common Mistakes

Using the store name without $ which is the store itself, not its value.

Using generic names like 'value' or 'store' which are not correct here.

Inside the derived callback, the store value is accessed with a $ prefix, like $count.

4fill in blank

hard

Fill both blanks to create a derived store that sums two writable stores 'a' and 'b'.

Svelte

const sum = derived([[1], [2]], ([$a, $b]) => $a + $b);

Drag options to blanks, or click blank then click option'

Aa

Bb

Ccount

Dvalue

Attempts:

3 left

💡 Hint

Common Mistakes

Using unrelated store names like 'count' or 'value'.

Swapping the order of stores but it still works, so order is less critical here.

The derived store depends on stores 'a' and 'b' to sum their values.

5fill in blank

hard

Fill all three blanks to create a derived store that formats a user's full name from 'firstName' and 'lastName' stores.

Svelte

const fullName = derived([[1], [2]], ([$firstName, $lastName]) => `$[3] $lastName`);

Drag options to blanks, or click blank then click option'

A$firstName

BfirstName

C${$firstName}

DlastName

Attempts:

3 left

💡 Hint

Common Mistakes

Using raw variable names without $ inside template literals.

Confusing the order of blanks or using incorrect syntax for template literals.

The derived store uses template literals to combine the first and last names. The blanks fill the dependencies and the template expression.

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