chore: tweak effect docs (#11979)

* tweak effect docs

* rename
pull/11970/head
Rich Harris 4 weeks ago committed by GitHub
parent 3e1abc0b87
commit 3bfb302a63
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

@ -250,40 +250,34 @@ $effect(() => {
}); });
``` ```
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). 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).)
```svelte ```svelte
<script> <script>
let object = $state({ count: 0 }); let state = $state({ value: 0 });
let derived_object = $derived({ let derived = $derived({ value: state.value * 2 });
doubled: object.count * 2
});
// this will run once, because `state` is never reassigned (only mutated)
$effect(() => { $effect(() => {
// never reruns, because object does not change, state;
// only its property changes
object;
console.log('object');
}); });
// this will run whenever `state.value` changes...
$effect(() => { $effect(() => {
// reruns, because object.count changes state.value;
object.count;
console.log('object.count');
}); });
// ...and so will this, because `derived` is a new object each time
$effect(() => { $effect(() => {
// reruns, because $derived produces a new object on each rerun derived;
derived_object;
console.log('derived_object');
}); });
</script> </script>
<button onclick={() => object.count++}> <button onclick={() => (state.value += 1)}>
{derived_object.doubled} {state.value}
</button> </button>
<p>{object.count} doubled is {derived_object.doubled}</p> <p>{state.value} doubled is {derived.value}</p>
``` ```
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==)). 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==)).

Loading…
Cancel
Save