Skip to content

Commit 4e18b58

Browse files
authored
Add untrack docs
1 parent 3ee44ba commit 4e18b58

File tree

1 file changed

+20
-0
lines changed

1 file changed

+20
-0
lines changed

documentation/docs/02-runes/04-$effect.md

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -140,6 +140,26 @@ $effect(() => {
140140
});
141141
```
142142

143+
## `untrack`
144+
145+
As stated previously, dependencies are automatically tracked in an effect. To prevent a dependency from being tracked, `untrack` can be used. Unlike runes, `untrack` has to be imported from the `svelte` module. [Here](/playground/untitled#H4sIAAAAAAAACnXOwUrEMBDG8VcJw8K2bNn1XNvC-g6erIckTiVsmpTkqygh7y7Z6npQr__5DTOJnJyZWnp0MLD8Qg1NxnKk9ikRPpYyK4Gab3lelmN8Y4vSlIz8V9fegR0itdRFHcyCYXQjzLz4AJFWhyD1JYsp-Fnst7X9fSGWIaToxS5Cgqu7-lbVr7rjaWKNqqr7IZUwQnsXveWj9a-VbL7uXIGqt6Vcj6473Z7q1Ap4J7zT1uhLn4qVh0MezsJEkWTuThv5D6uCH65Y_WBqCPwOahFWzs_5E7FwwqtqAQAA)'s an example of its usage:
146+
147+
```svelte
148+
<script>
149+
import {untrack} from 'svelte';
150+
151+
let a = $state(0);
152+
let b = $state(0);
153+
154+
$effect(()=>{
155+
console.log(a,untrack(()=>b)); //this will only run when `a` changes
156+
})
157+
</script>
158+
159+
<button onclick={()=>a++}>A is {a}</button>
160+
<button onclick={()=>b++}>B is {b}</button>
161+
```
162+
143163
## `$effect.pre`
144164

145165
In rare cases, you may need to run code _before_ the DOM updates. For this we can use the `$effect.pre` rune:

0 commit comments

Comments
 (0)