Skip to content

docs: tweak untrack description, provide an example of usage #14085

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.

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

Merged
merged 3 commits into from
Nov 1, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
6 changes: 6 additions & 0 deletions documentation/docs/02-runes/03-$derived.md
Original file line number Diff line number Diff line change
Expand Up @@ -45,3 +45,9 @@ Sometimes you need to create complex derivations that don't fit inside a short e
```

In essence, `$derived(expression)` is equivalent to `$derived.by(() => expression)`.

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

To exempt a piece of state from being treated as a dependency, use [`untrack`](svelte#untrack).
2 changes: 1 addition & 1 deletion documentation/docs/02-runes/04-$effect.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
title: $effect
---

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.
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.
Copy link

@gterras gterras Nov 1, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Effects are what make your application do things This sounds too broad, you can actually make applications do things without using effect. I suppose react is out of question, why not something like $effect lets you take full control on your application?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you can actually make applications do things without using effect

Like what?

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Like anything that don't use effect... like 90% of the example of the docs and tutorials? Is this a real question?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do you mean like the {name} in <h1>hello {name}</h1>? Because that is an effect. This is made quite clear in the following sentence

Copy link

@gterras gterras Nov 1, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Documenting the implementation is pointless in a user docs. This makes the sentence even more confusing. This reads:

"Effects is everywhere, you and Svelte cannot do anything without effects. Avoid overusing effects!

This screams read the full page or you will miss out to the uninitiated. Also this is a direct contradiction with the when not to use effect section which heavily tempers this statement.


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.

Expand Down
12 changes: 11 additions & 1 deletion packages/svelte/src/internal/client/runtime.js
Original file line number Diff line number Diff line change
Expand Up @@ -831,7 +831,17 @@ export function invalidate_inner_signals(fn) {
}

/**
* Use `untrack` to prevent something from being treated as an `$effect`/`$derived` dependency.
* When used inside a [`$derived`](https://svelte.dev/docs/svelte/$derived) or [`$effect`](https://svelte.dev/docs/svelte/$effect),
* any state read inside `fn` will not be treated as a dependency.
*
* ```ts
* $effect(() => {
* // this will run when `data` changes, but not when `time` changes
* save(data, {
* timestamp: untrack(() => time)
* });
* });
* ```
* @template T
* @param {() => T} fn
* @returns {T}
Expand Down
12 changes: 11 additions & 1 deletion packages/svelte/types/index.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -455,7 +455,17 @@ declare module 'svelte' {
* */
export function tick(): Promise<void>;
/**
* Use `untrack` to prevent something from being treated as an `$effect`/`$derived` dependency.
* When used inside a [`$derived`](https://svelte.dev/docs/svelte/$derived) or [`$effect`](https://svelte.dev/docs/svelte/$effect),
* any state read inside `fn` will not be treated as a dependency.
*
* ```ts
* $effect(() => {
* // this will run when `data` changes, but not when `time` changes
* save(data, {
* timestamp: untrack(() => time)
* });
* });
* ```
* */
export function untrack<T>(fn: () => T): T;
/**
Expand Down