Derived stores in Svelte - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a derived store in Svelte?

A derived store is a special store that automatically updates its value based on one or more other stores. It lets you create values that depend on other reactive data.

beginner

How do you create a derived store in Svelte?

You use the derived function from svelte/store, passing the source store(s) and a callback that returns the new value.

intermediate

Can a derived store depend on multiple stores? How?

Yes. You pass an array of stores as the first argument to derived. The callback receives their values as an array to compute the derived value.

beginner

What happens when a source store updates in a derived store?

The derived store automatically recalculates its value using the callback and updates any subscribers with the new value.

intermediate

Why use derived stores instead of manually subscribing to stores?

Derived stores simplify code by handling updates automatically and keep your reactive logic clean and declarative without manual subscriptions or updates.

Which function creates a derived store in Svelte?

A derived()

B writable()

C readable()

D subscribe()

The derived() function creates a store whose value depends on other stores.

What argument(s) does derived() take?

A No arguments

B Only a callback function

C Only one store

D One or more stores and a callback function

derived() takes one or more source stores and a callback to compute the derived value.

If a source store changes, what happens to the derived store?

A It resets to null

B It stays the same

C It recalculates and updates its value

D It unsubscribes automatically

Derived stores automatically recalculate when their source stores change.

Can a derived store be writable?

A Yes, always writable

B No, derived stores are read-only by default

C Only if created with writable()

D Only if you pass a setter function

Derived stores are read-only and update based on their source stores.

Why is using derived stores beneficial?

A They keep reactive logic clean and automatic

B They make stores writable

C They prevent updates

D They replace all stores

Derived stores help keep your code clean by automatically updating based on dependencies.

Explain how to create a derived store in Svelte and how it updates when source stores change.

Think about how derived stores react to changes in other stores.

Describe the advantages of using derived stores instead of manually subscribing to multiple stores.

Consider how derived stores simplify reactive programming.

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