Skip to content

Commit 19038d1

Browse files
authored
docs: add section on update propagation (#14938)
1 parent 08061c8 commit 19038d1

File tree

1 file changed

+17
-0
lines changed

1 file changed

+17
-0
lines changed

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,3 +51,20 @@ In essence, `$derived(expression)` is equivalent to `$derived.by(() => expressio
5151
Anything read synchronously inside the `$derived` expression (or `$derived.by` function body) is considered a _dependency_ of the derived state. When the state changes, the derived will be marked as _dirty_ and recalculated when it is next read.
5252

5353
To exempt a piece of state from being treated as a dependency, use [`untrack`](svelte#untrack).
54+
55+
## Update propagation
56+
57+
Svelte uses something called _push-pull reactivity_ — when state is updated, everything that depends on the state (whether directly or indirectly) is immediately notified of the change (the 'push'), but derived values are not re-evaluated until they are actually read (the 'pull').
58+
59+
If the new value of a derived is referentially identical to its previous value, downstream updates will be skipped. In other words, Svelte will only update the text inside the button when `large` changes, not when `count` changes, even though `large` depends on `count`:
60+
61+
```svelte
62+
<script>
63+
let count = $state(0);
64+
let large = $derived(count > 10);
65+
</script>
66+
67+
<button onclick={() => count++}>
68+
{large}
69+
</button>
70+
```

0 commit comments

Comments
 (0)