Skip to content

Commit

Permalink
docs: add section on update propagation (#14938)
Browse files Browse the repository at this point in the history
  • Loading branch information
Rich-Harris authored Jan 7, 2025
1 parent 08061c8 commit 19038d1
Showing 1 changed file with 17 additions and 0 deletions.
17 changes: 17 additions & 0 deletions documentation/docs/02-runes/03-$derived.md
Original file line number Diff line number Diff line change
Expand Up @@ -51,3 +51,20 @@ In essence, `$derived(expression)` is equivalent to `$derived.by(() => expressio
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.

To exempt a piece of state from being treated as a dependency, use [`untrack`](svelte#untrack).

## Update propagation

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').

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`:

```svelte
<script>
let count = $state(0);
let large = $derived(count > 10);
</script>
<button onclick={() => count++}>
{large}
</button>
```

0 comments on commit 19038d1

Please sign in to comment.