@ -49,9 +49,9 @@ In essence, `$derived(expression)` is equivalent to `$derived.by(() => expressio
## Understanding dependencies
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.
Anything read 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.
In async derived expressions/functions, only values read **synchronously during evaluation** are tracked automatically (reads that happen after an `await` are not). If you need a value to be a dependency, read it before awaiting (or split it out into its own derived):
When you use `await` directly inside a `$derived(...)` expression (or a template expression), Svelte preserves dependency tracking across the `await`. Reactivity issues can occur if the `await` happens inside a helper function and reactive state is only read after that `await` — in those cases, access the reactive value before awaiting, or move it into its own `$derived` so that Svelte can clearly track it.
```svelte
<script>
@ -60,9 +60,7 @@ In async derived expressions/functions, only values read **synchronously during
</script>
```
In `$derived(await getPost(params.slug))`, `params.slug` is evaluated before the `await` yields, so it is part of the synchronous evaluation and can be tracked as a dependency.
Avoid relying on `await` as a way to prevent tracking — if you intentionally want to exclude a value from being treated as a dependency, use [`untrack`](svelte#untrack) instead.
To exempt a piece of state from being treated as a dependency, use [`untrack`](svelte#untrack).