Skip to content

Commit 2dd332a

Browse files
Sync svelte docs (#748)
sync svelte docs Co-authored-by: Rich-Harris <[email protected]>
1 parent f79a22f commit 2dd332a

File tree

3 files changed

+18
-2
lines changed

3 files changed

+18
-2
lines changed

apps/svelte.dev/content/docs/svelte/02-runes/03-$derived.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,3 +45,9 @@ Sometimes you need to create complex derivations that don't fit inside a short e
4545
```
4646

4747
In essence, `$derived(expression)` is equivalent to `$derived.by(() => expression)`.
48+
49+
## Understanding dependencies
50+
51+
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.
52+
53+
To exempt a piece of state from being treated as a dependency, use [`untrack`](svelte#untrack).

apps/svelte.dev/content/docs/svelte/02-runes/04-$effect.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
title: $effect
33
---
44

5-
Effects are what make your application _do things_. When Svelte runs an effect function, it tracks which pieces of state (and derived state) are accessed, and re-runs the function when that state later changes.
5+
Effects are what make your application _do things_. When Svelte runs an effect function, it tracks which pieces of state (and derived state) are accessed (unless accessed inside [`untrack`](svelte#untrack)), and re-runs the function when that state later changes.
66

77
Most of the effects in a Svelte app are created by Svelte itself — they're the bits that update the text in `<h1>hello {name}!</h1>` when `name` changes, for example.
88

apps/svelte.dev/content/docs/svelte/98-reference/20-svelte.md

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -344,7 +344,17 @@ function unmount(component: Record<string, any>): void;
344344

345345
## untrack
346346

347-
Use `untrack` to prevent something from being treated as an `$effect`/`$derived` dependency.
347+
When used inside a [`$derived`](https://svelte.dev/docs/svelte/$derived) or [`$effect`](https://svelte.dev/docs/svelte/$effect),
348+
any state read inside `fn` will not be treated as a dependency.
349+
350+
```ts
351+
$effect(() => {
352+
// this will run when `data` changes, but not when `time` changes
353+
save(data, {
354+
timestamp: untrack(() => time)
355+
});
356+
});
357+
```
348358

349359
<div class="ts-block">
350360

0 commit comments

Comments
 (0)