Why Derived stores in Svelte? - Purpose & Use Cases

The Big Idea

Discover how to make your app update itself like magic without writing extra code!

The Scenario

Imagine you have two separate pieces of data, like a user's first name and last name, and you want to show their full name everywhere in your app. Every time either name changes, you have to manually update the full name in all places.

The Problem

Manually updating combined data is tiring and easy to forget. If you miss updating one spot, your app shows wrong or old information. This leads to bugs and a frustrating experience for users and developers.

The Solution

Derived stores automatically create new data based on other stores. When the original data changes, the derived store updates itself instantly. This keeps your app data in sync without extra work.

Before vs After

✗ Before

let fullName = firstName + ' ' + lastName;
// Need to update fullName every time firstName or lastName changes

✓ After

import { derived } from 'svelte/store';
const fullName = derived([firstName, lastName], ([$firstName, $lastName]) => `${$firstName} ${$lastName}`);

What It Enables

It enables effortless, automatic updates of combined or computed data, keeping your app consistent and bug-free.

Real Life Example

In a shopping cart, you can derive the total price from item quantities and prices. When any item changes, the total updates instantly without extra code.

Key Takeaways

Manual data syncing is error-prone and slow.

Derived stores update automatically when dependencies change.

This keeps your app data consistent and easier to maintain.