Skip to content

chore: tweak effect docs #11979

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 2 commits into from
Jun 10, 2024
Merged
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
30 changes: 12 additions & 18 deletions sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
<script>
let object = $state({ count: 0 });
let derived_object = $derived({
doubled: object.count * 2
});
let state = $state({ value: 0 });
let derived = $derived({ value: state.value * 2 });

// this will run once, because `state` is never reassigned (only mutated)
$effect(() => {
// never reruns, because object does not change,
// only its property changes
object;
console.log('object');
state;
});

// this will run whenever `state.value` changes...
$effect(() => {
// reruns, because object.count changes
object.count;
console.log('object.count');
state.value;
});

// ...and so will this, because `derived` is a new object each time
$effect(() => {
// reruns, because $derived produces a new object on each rerun
derived_object;
console.log('derived_object');
derived;
});
</script>

<button onclick={() => object.count++}>
{derived_object.doubled}
<button onclick={() => (state.value += 1)}>
{state.value}
</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==)).
Expand Down
Loading