Derived stores in Svelte - Deep Dive

Overview - Derived stores

What is it?

Derived stores in Svelte are special stores that automatically calculate their value based on one or more other stores. They update whenever the stores they depend on change, so you always get fresh, combined data without manual updates. This helps keep your app's state organized and reactive with less code.

Why it matters

Without derived stores, you would have to manually listen to changes in multiple stores and update values yourself, which can get messy and error-prone. Derived stores simplify this by automatically syncing data, making your app more reliable and easier to maintain. This means fewer bugs and smoother user experiences.

Where it fits

Before learning derived stores, you should understand basic Svelte stores and how reactivity works in Svelte. After mastering derived stores, you can explore custom stores and advanced reactive patterns to build complex state management solutions.

Mental Model

Core Idea

A derived store is like a recipe that automatically updates its dish whenever any ingredient changes.

Think of it like...

Imagine you have a smoothie recipe that depends on fruits you have. Whenever you get new fruits or change the amount, the smoothie flavor updates automatically without you mixing it again manually.

┌───────────────┐     ┌───────────────┐
│ Store A       │     │ Store B       │
└──────┬────────┘     └──────┬────────┘
       │                     │
       └──────┬──────────────┘
              │
       ┌──────▼────────┐
       │ Derived Store │
       │ (computed)    │
       └───────────────┘

Build-Up - 7 Steps

1

Foundation

Understanding basic Svelte stores

Concept: Learn what a Svelte store is and how it holds reactive data.

A Svelte store is a simple object that holds a value and lets components subscribe to changes. For example, a writable store lets you set and update values, and components react automatically when the value changes.

Result

You can create a store, update its value, and see components update automatically.

Understanding stores is essential because derived stores build on this reactive data concept.

2

Foundation

Reactivity with multiple stores

Concept: Learn how to react to changes from more than one store.

Sometimes you want to combine data from two or more stores. Without derived stores, you'd subscribe to each store and update a variable manually whenever any store changes.

Result

You can combine values but must write extra code to keep them in sync.

Knowing this manual approach shows why derived stores simplify combining reactive data.

3

Intermediate

Creating a simple derived store

🤔Before reading on: do you think a derived store can depend on just one store or must it have many? Commit to your answer.

Concept: Learn how to create a derived store from one or more stores using Svelte's derived function.

Use Svelte's derived function by passing one or more stores and a callback that computes the new value. For example: import { writable, derived } from 'svelte/store'; const count = writable(1); const doubled = derived(count, $count => $count * 2); The 'doubled' store updates automatically when 'count' changes.

Result

The derived store 'doubled' always holds twice the current 'count' value.

Understanding that derived stores can depend on any number of stores unlocks flexible reactive data combinations.

4

Intermediate

Derived stores with multiple dependencies

🤔Before reading on: do you think derived stores update synchronously or asynchronously when dependencies change? Commit to your answer.

Concept: Learn how to create derived stores that depend on multiple stores and combine their values.

Pass an array of stores to derived, and the callback receives an array of their values. For example: import { writable, derived } from 'svelte/store'; const a = writable(2); const b = writable(3); const sum = derived([a, b], ([$a, $b]) => $a + $b); 'sum' updates whenever 'a' or 'b' changes.

Result

The derived store 'sum' always holds the sum of 'a' and 'b'.

Knowing how to combine multiple stores lets you build complex reactive data flows easily.

5

Intermediate

Unsubscribing and cleanup in derived stores

Concept: Learn how derived stores handle subscriptions and cleanup automatically.

Derived stores subscribe to their dependencies only when they have subscribers themselves. When no one listens, they unsubscribe to save resources. You can also provide a cleanup function in the callback if needed for side effects.

Result

Derived stores manage subscriptions efficiently, avoiding unnecessary work.

Understanding subscription management helps write performant apps and avoid memory leaks.

6

Advanced

Using async logic inside derived stores

🤔Before reading on: can derived stores handle asynchronous operations directly? Commit to your answer.

Concept: Learn how to handle asynchronous data inside derived stores using async functions or Promises.

Derived stores can return Promises or use async callbacks, but you must handle loading states yourself. For example: import { writable, derived } from 'svelte/store'; const userId = writable(1); const userData = derived(userId, async ($id, set) => { const response = await fetch(`/api/user/${$id}`); const data = await response.json(); set(data); }); Here, 'set' updates the derived store when data arrives.

Result

Derived store updates asynchronously when data is fetched.

Knowing how to integrate async logic in derived stores enables reactive data fetching patterns.

7

Expert

Avoiding common pitfalls with derived stores

🤔Before reading on: do you think derived stores always update immediately or can they cause subtle bugs if misused? Commit to your answer.

Concept: Learn about subtle issues like stale values, infinite loops, or unnecessary recomputations in derived stores and how to avoid them.

Derived stores recompute whenever dependencies change, so circular dependencies or heavy computations can cause performance issues or bugs. Use techniques like memoization, careful dependency design, or splitting stores to avoid these problems.

Result

Your app remains performant and bug-free even with complex reactive data.

Understanding these pitfalls helps build robust, scalable reactive systems.

Under the Hood

Derived stores internally subscribe to their input stores and listen for changes. When any input store updates, the derived store runs its callback function to compute a new value. It then notifies its own subscribers of the update. Subscriptions are managed so that derived stores only stay active when needed, conserving resources.

Why designed this way?

This design follows reactive programming principles, making data flow automatic and declarative. It avoids manual event handling and state syncing, reducing bugs and boilerplate. Alternatives like manual subscriptions were error-prone and verbose, so Svelte introduced derived stores for cleaner, efficient reactivity.

┌───────────────┐       ┌───────────────┐
│ Input Store A │──────▶│               │
└───────────────┘       │               │
                        │               │
┌───────────────┐       │ Derived Store │─────▶ Subscribers
│ Input Store B │──────▶│   Callback    │
└───────────────┘       │               │
                        │               │
                        └───────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Do derived stores always update synchronously? Commit to yes or no.

Common Belief: Derived stores update their values immediately and synchronously when dependencies change.

Reality: Derived stores update synchronously for synchronous callbacks, but if the callback is async or uses Promises, updates happen asynchronously.

Why it matters: Assuming synchronous updates can cause bugs when relying on immediate values, especially with async data fetching.

Quick: Can derived stores modify their input stores? Commit to yes or no.

Common Belief: Derived stores can change the values of the stores they depend on.

Reality: Derived stores are read-only and cannot modify their input stores; they only compute new values based on inputs.

Why it matters: Trying to modify input stores from derived stores breaks unidirectional data flow and can cause confusing bugs.

Quick: Do derived stores always improve performance? Commit to yes or no.

Common Belief: Using derived stores always makes your app faster and more efficient.

Reality: Derived stores can cause performance issues if they recompute expensive calculations too often or create circular dependencies.

Why it matters: Blindly using derived stores without care can degrade performance and cause infinite update loops.

Quick: Are derived stores only useful for combining two stores? Commit to yes or no.

Common Belief: Derived stores are only useful when combining exactly two stores.

Reality: Derived stores can depend on any number of stores, even just one, making them very flexible.

Why it matters: Limiting derived stores to two inputs restricts their usefulness and leads to more complex manual code.

Expert Zone

1

Derived stores only subscribe to their dependencies when they themselves have subscribers, which optimizes resource use but can cause unexpected delays if not understood.

2

The callback in a derived store can receive a 'set' function to manually control when the derived value updates, enabling asynchronous or conditional updates.

3

Derived stores can be chained, where one derived store depends on another, allowing complex reactive data pipelines but requiring careful dependency management to avoid cycles.

When NOT to use

Avoid derived stores when you need writable reactive state that can be updated from multiple places; use writable or custom stores instead. Also, if your computation is very expensive and triggers too often, consider memoization or throttling outside the derived store.

Production Patterns

In production, derived stores are used to compute filtered lists, combined user settings, or derived UI states like form validation status. They often integrate with async data fetching by combining writable stores for loading states and derived stores for computed results.

Connections

Reactive programming

Derived stores implement reactive programming principles by automatically updating values based on dependencies.

Understanding derived stores deepens your grasp of reactive programming, which is used in many UI frameworks and data flow systems.

Functional programming

Derived stores use pure functions to compute new values from inputs, reflecting functional programming ideas.

Knowing this connection helps appreciate immutability and side-effect-free computations in UI state management.

Spreadsheet formulas

Derived stores behave like spreadsheet cells that automatically recalculate when referenced cells change.

Recognizing this similarity clarifies how reactive data flows and dependencies work in programming.

Common Pitfalls

#1 Creating circular dependencies between derived stores causing infinite loops.

Wrong approach:

const a = derived(b, $b => $b + 1);
const b = derived(a, $a => $a + 1);

Correct approach:

Avoid circular dependencies by redesigning stores or combining logic into one derived store.

Root cause:

Misunderstanding that derived stores recompute on dependency changes without cycle detection.

#2 Using async functions directly as derived callbacks without handling the set function.

Wrong approach:

const data = derived(id, async $id => {
const res = await fetch(`/api/${$id}`);
return await res.json();
});

Correct approach:

const data = derived(id, ($id, set) => {
fetch(`/api/${$id}`)
.then(res => res.json())
.then(set);
});

Root cause:

Assuming derived callbacks can return Promises directly and update automatically.

#3 Trying to update a derived store directly like a writable store.

Wrong approach:

derivedStore.set(newValue);

Correct approach:

Update the input stores that the derived store depends on instead.

Root cause:

Confusing derived stores with writable stores and misunderstanding their read-only nature.

Key Takeaways

Derived stores in Svelte automatically compute values based on one or more input stores, keeping data in sync effortlessly.

They help reduce manual subscription code and prevent bugs by managing reactive dependencies declaratively.

Derived stores are read-only and update whenever their dependencies change, supporting both synchronous and asynchronous computations.

Understanding subscription management and avoiding circular dependencies is key to using derived stores effectively.

Derived stores connect deeply to reactive and functional programming concepts, making them powerful tools for building reactive apps.

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