Skip to content

Commit cc4af6c

Browse files
committed
docs: note that $derived memoizes output
closes #14772
1 parent 7737868 commit cc4af6c

File tree

1 file changed

+15
-0
lines changed

1 file changed

+15
-0
lines changed

documentation/docs/02-runes/03-$derived.md

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,21 @@ Derived state is declared with the `$derived` rune:
1919

2020
The expression inside `$derived(...)` should be free of side-effects. Svelte will disallow state changes (e.g. `count++`) inside derived expressions.
2121

22+
Subsequents results of a `$derived` expression are compared against its previous value. If they are referentially the same, the `$derived` won't propagate an update to its dependencies.
23+
24+
```svelte
25+
<script>
26+
let count = $state(0);
27+
let always_0 = $derived(count * 0);
28+
</script>
29+
30+
<button onclick={() => count++}>
31+
<!-- this will never trigger a rerender, because the value stays the same -->
32+
{always_0}
33+
</button>
34+
```
35+
36+
2237
As with `$state`, you can mark class fields as `$derived`.
2338

2439
> [!NOTE] Code in Svelte components is only executed once at creation. Without the `$derived` rune, `doubled` would maintain its original value even when `count` changes.

0 commit comments

Comments
 (0)