0 day streak
javascript / intermediate
Snippet

Reactive Composition with Derived Stores

Derived stores allow you to create a store whose value depends on one or more other stores. Whenever the source stores change, the derived store recalculates its value efficiently.

snippet.js
javascript
1
2
3
4
5
6
7
import { derived } from 'svelte/store';
import { count } from './stores.js';
export const doubled = derived(
count,
$count => $count * 2
);
svelte
Breakdown
1
import { derived } from 'svelte/store';
Imports the derived helper to create dependent reactive state.
2
count,
The first argument is the input store (or an array of stores).
3
$count => $count * 2
The callback receives the current values and returns the new derived value.