diff --git a/sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md b/sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md index 70a1cbb288..b597307dd2 100644 --- a/sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md +++ b/sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md @@ -116,7 +116,7 @@ As with `$state`, you can mark class fields as `$derived`. ### What this replaces -The non-runes equivalent would be `$: double = count * 2`. There are some important differences to be aware of: +If the value of a reactive variable is being computed it should be replaced with `$derived` whether it previously took the form of `$: double = count * 2` or `$: { double = count * 2; }` There are some important differences to be aware of: - With the `$derived` rune, the value of `double` is always current (for example if you update `count` then immediately `console.log(double)`). With `$:` declarations, values are not updated until right before Svelte updates the DOM - In non-runes mode, Svelte determines the dependencies of `double` by statically analysing the `count * 2` expression. If you refactor it... @@ -136,7 +136,7 @@ The non-runes equivalent would be `$: double = count * 2`. There are some import ## `$effect` -To run code whenever specific values change, or when a component is mounted to the DOM, we can use the `$effect` rune: +To run side-effects like logging or analytics whenever some specific values change, or when a component is mounted to the DOM, we can use the `$effect` rune: ```diff