Skip to content

Commit 60aa4e2

Browse files
committed
tweak effect docs
1 parent 36a5143 commit 60aa4e2

File tree

1 file changed

+12
-18
lines changed
  • sites/svelte-5-preview/src/routes/docs/content/01-api

1 file changed

+12
-18
lines changed

sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md

Lines changed: 12 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -250,40 +250,34 @@ $effect(() => {
250250
});
251251
```
252252

253-
An effect only reruns when the object it reads changes, not when a property inside it changes. If you want to react to _any_ change inside an object for inspection purposes at dev time, you may want to use [`inspect`](#$inspect).
253+
An effect only reruns when the object it reads changes, not when a property inside it changes. (If you want to observe changes _inside_ an object at dev time, you can use [`$inspect`](#$inspect).)
254254

255255
```svelte
256256
<script>
257-
let object = $state({ count: 0 });
258-
let derived_object = $derived({
259-
doubled: object.count * 2
260-
});
257+
let a = $state({ value: 0 });
258+
let b = $derived({ value: a.value * 2 });
261259
260+
// this will run once, because `a` is never reassigned (only mutated)
262261
$effect(() => {
263-
// never reruns, because object does not change,
264-
// only its property changes
265-
object;
266-
console.log('object');
262+
a;
267263
});
268264
265+
// this will run whenever `a.value` changes...
269266
$effect(() => {
270-
// reruns, because object.count changes
271-
object.count;
272-
console.log('object.count');
267+
a.value;
273268
});
274269
270+
// ...and so will this, because `b` is a new object each time
275271
$effect(() => {
276-
// reruns, because $derived produces a new object on each rerun
277-
derived_object;
278-
console.log('derived_object');
272+
b;
279273
});
280274
</script>
281275
282-
<button onclick={() => object.count++}>
283-
{derived_object.doubled}
276+
<button onclick={() => (a.value += 1)}>
277+
{a.value}
284278
</button>
285279
286-
<p>{object.count} doubled is {derived_object.doubled}</p>
280+
<p>{a.value} doubled is {b.value}</p>
287281
```
288282

289283
You can return a function from `$effect`, which will run immediately before the effect re-runs, and before it is destroyed ([demo](/#H4sIAAAAAAAAE42SzW6DMBCEX2Vl5RDaVCQ9JoDUY--9lUox9lKsGBvZC1GEePcaKPnpqSe86_m0M2t6ViqNnu0_e2Z4jWzP3pqGbRhdmrHwHWrCUHvbOjF2Ei-caijLTU4aCYRtDUEKK0-ccL2NDstNrbRWHoU10t8Eu-121gTVCssSBa3XEaQZ9GMrpziGj0p5OAccCgSHwmEgJZwrNNihg6MyhK7j-gii4uYb_YyGUZ5guQwzPdL7b_U4ZNSOvp9T2B3m1rB5cLx4zMkhtc7AHz7YVCVwEFzrgosTBMuNs52SKDegaPbvWnMH8AhUXaNUIY6-hHCldQhUIcyLCFlfAuHvkCKaYk8iYevGGgy2wyyJnpy9oLwG0sjdNe2yhGhJN32HsUzi2xOapNpl_bSLIYnDeeoVLZE1YI3QSpzSfo7-8J5PKbwOmdf2jC6JZyD7HxpPaMk93aHhF6utVKVCyfbkWhy-hh9Z3o_2nQIAAA==)).

0 commit comments

Comments
 (0)