You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: documentation/docs/02-runes/03-$derived.md
+15Lines changed: 15 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -19,6 +19,21 @@ Derived state is declared with the `$derived` rune:
19
19
20
20
The expression inside `$derived(...)` should be free of side-effects. Svelte will disallow state changes (e.g. `count++`) inside derived expressions.
21
21
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
+
22
37
As with `$state`, you can mark class fields as `$derived`.
23
38
24
39
> [!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