Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: note that $derived memoizes output #14931

Closed
wants to merge 2 commits into from
Closed

docs: note that $derived memoizes output #14931

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cc4af6c
docs: note that `$derived` memoizes output
dummdidumm Jan 7, 2025
0321db1
Update documentation/docs/02-runes/03-$derived.md
dummdidumm Jan 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 15 additions & 0 deletions documentation/docs/02-runes/03-$derived.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,21 @@ Derived state is declared with the `$derived` rune:

The expression inside `$derived(...)` should be free of side-effects. Svelte will disallow state changes (e.g. `count++`) inside derived expressions.

Subsequent 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.

```svelte
<script>
let count = $state(0);
let always_0 = $derived(count * 0);
</script>

<button onclick={() => count++}>
<!-- this will never trigger a rerender, because the value stays the same -->
{always_0}
</button>
```


As with `$state`, you can mark class fields as `$derived`.

> [!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.
Expand Down
Loading