@ -239,79 +239,61 @@ An effect only reruns when the object it reads changes, not when a property insi
<p>{count} doubled is {doubled}</p>
```
You can return a function from `$effect`, which will run immediately before the effect re-runs, and before it is destroyed.
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==)).
```svelte
<script>
let count = $state(0);
let doubled = $derived(count * 2);
let milliseconds = $state(1000);
$effect(() => {
console.log({ count, doubled });
// This will be recreated whenever `milliseconds` changes
> `$effect` was designed for managing side effects such as logging or connecting to external systems like third party libraries that have an imperative API. If you're managing state or dataflow, you should use it with caution – most of the time, you're better off using a different pattern. Below are some use cases and what to use instead.
### When not to use `$effect`
If you update `$state` inside an `$effect`, you most likely want to use `$derived` instead.
In general, `$effect` is best considered something of an escape hatch — useful for things like analytics and direct DOM manipulation — rather than a tool you should use frequently. In particular, avoid using it to synchronise state. Instead of this...
```svelte
<!-- Don't do this -->
<script>
let count = $state(0);
let doubled = $state();
// don't do this!
$effect(() => {
doubled = count * 2;
});
</script>
<!-- Do this instead: -->
<script>
let count = $state(0);
let doubled = $derived(count * 2);
</script>
```
This also applies to more complex calculations that require more than a simple expression and write to more than one variable. In these cases, you can use `$derived.by`.
...do this:
```svelte
<!-- Don't do this -->
<script>
let result_1 = $state();
let result_2 = $state();
$effect(() => {
// ... some lengthy code resulting in
result_1 = someValue;
result_2 = someOtherValue;
});
</script>
<!-- Do this instead: -->
<script>
let { result_1, result_2 } = $derived.by(() => {
// ... some lengthy code resulting in
return {
result_1: someValue,
result_2: someOtherValue
};
});
let count = $state(0);
let doubled = $derived(count * 2);
</script>
```
> For things that are more complicated than a simple expression like `count * 2`, you can also use [`$derived.by`](#$derived-by).
When reacting to a state change and writing to a different state as a result, think about if it's possible to use callback props instead.
Rich Harris
2 years ago