Skip to content

Commit bf80c10

Browse files
docs: clarify example on dynamic dependency tracking (#13767)
* docs(effect): clarify example on dynamic dependency tracking * use an if block, it's clearer * fix * toggle --------- Co-authored-by: Rich Harris <[email protected]>
1 parent 79a67c9 commit bf80c10

File tree

1 file changed

+7
-3
lines changed

1 file changed

+7
-3
lines changed

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

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,11 @@ An effect only reruns when the object it reads changes, not when a property insi
125125
<p>{state.value} doubled is {derived.value}</p>
126126
```
127127

128-
An effect only depends on the values that it read the last time it ran. If `a` is true, changes to `b` will [not cause this effect to rerun](/playground/untitled#H4sIAAAAAAAAE3WQ0WrDMAxFf0U1hTow1vcsMfQ7lj3YjlxEXTvEymC4_vfFC6Ewtidxde8RkrJw5DGJ9j2LoO8oWnGZJvEi-GuqIn2iZ1x1istsa6dLdqaJ1RAG9sigoYdjYs0onfYJm7fdMX85q3dE59CylA30CnJtDWxjSNHjq49XeZqXEChcT9usLUAOpIbHA0yzM78oColGhDVofLS3neZSS6mqOz-XD51ZmGOAGKwne-vztk-956CL0kAJsi7decupf4l658EUZX4I8yTWt93jSI5wFC3PC5aP8g0Aje5DcQEAAA==):
128+
An effect only depends on the values that it read the last time it ran. This has interesting implications for effects that have conditional code.
129+
130+
For instance, if `a` is `true` in the code snippet below, the code inside the `if` block will run and `b` will be evaluated. As such, changes to either `a` or `b` [will cause the effect to re-run](/playground/untitled#H4sIAAAAAAAAE3VQzWrDMAx-FdUU4kBp71li6EPstOxge0ox8-QQK2PD-N1nLy2F0Z2Evj9_chKkP1B04pnYscc3cRCT8xhF95IEf8-Vq0DBr8rzPB_jJ3qumNERH-E2ECNxiRF9tIubWY00lgcYNAywj6wZJS8rtk83wjwgCrXHaULLUrYwKEgVGrnkx-Dx6MNFNstK5OjSbFGbwE0gdXuT_zGYrjmAuco515Hr1p_uXak3K3MgCGS9s-9D2grU-judlQYXIencnzad-tdR79qZrMyvw9wd5Z8Yv1h09dz8mn8AkM7Pfo0BAAA=).
131+
132+
Conversely, if `a` is `false`, `b` will not be evaluated, and the effect will _only_ re-run when `a` changes.
129133

130134
```ts
131135
let a = false;
@@ -134,8 +138,8 @@ let b = false;
134138
$effect(() => {
135139
console.log('running');
136140

137-
if (a || b) {
138-
console.log('inside if block');
141+
if (a) {
142+
console.log('b:', b);
139143
}
140144
});
141145
```

0 commit comments

Comments
 (0)