Skip to content

Commit 782de04

Browse files
sync svelte docs
1 parent 21d6ef8 commit 782de04

File tree

2 files changed

+40
-30
lines changed

2 files changed

+40
-30
lines changed

apps/svelte.dev/content/docs/svelte/98-reference/.generated/client-errors.md

Lines changed: 20 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -128,26 +128,31 @@ Cannot set prototype of `$state` object
128128
Updating state inside a derived or a template expression is forbidden. If the value should not be reactive, declare it without `$state`
129129
```
130130

131-
This error is thrown in a situation like this:
131+
This error occurs when state is updated while evaluating a `$derived`. You might encounter it while trying to 'derive' two pieces of state in one go:
132132

133133
```svelte
134134
<script>
135-
let count = $state(0);
136-
let multiple = $derived.by(() => {
137-
const result = count * 2;
138-
if (result > 10) {
139-
count = 0;
140-
}
141-
return result;
142-
});
135+
let count = $state(0);
136+
137+
let even = $state(true);
138+
139+
let odd = $derived.by(() => {
140+
even = count % 2 === 0;
141+
return !even;
142+
});
143143
</script>
144144
145-
<button onclick={() => count++}>{count} / {multiple}</button>
145+
<button onclick={() => count++}>{count}</button>
146+
147+
<p>{count} is even: {even}</p>
148+
<p>{count} is odd: {odd}</p>
146149
```
147150

148-
Here, the `$derived` updates `count`, which is `$state` and therefore forbidden to do. It is forbidden because the reactive graph could become unstable as a result, leading to subtle bugs, like values being stale or effects firing in the wrong order. To prevent this, Svelte errors when detecting an update to a `$state` variable.
151+
This is forbidden because it introduces instability: if `<p>{count} is even: {even}</p>` is updated before `odd` is recalculated, `even` will be stale. In most cases the solution is to make everything derived:
152+
153+
```js
154+
let even = $derived(count % 2 === 0);
155+
let odd = $derived(!even);
156+
```
149157

150-
To fix this:
151-
- See if it's possible to refactor your `$derived` such that the update becomes unnecessary
152-
- Think about why you need to update `$state` inside a `$derived` in the first place. Maybe it's because you're using `bind:`, which leads you down a bad code path, and separating input and output path (by splitting it up to an attribute and an event, or by using [Function bindings](bind#Function-bindings)) makes it possible avoid the update
153-
- If it's unavoidable, you may need to use an [`$effect`]($effect) instead. This could include splitting parts of the `$derived` into an [`$effect`]($effect) which does the updates
158+
If side-effects are unavoidable, use [`$effect`]($effect) instead.

apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-errors.md

Lines changed: 20 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -135,29 +135,34 @@ Cannot set prototype of `$state` object
135135
Updating state inside a derived or a template expression is forbidden. If the value should not be reactive, declare it without `$state`
136136
```
137137

138-
This error is thrown in a situation like this:
138+
This error occurs when state is updated while evaluating a `$derived`. You might encounter it while trying to 'derive' two pieces of state in one go:
139139

140140
```svelte
141141
<script>
142-
let count = $state(0);
143-
let multiple = $derived.by(() => {
144-
const result = count * 2;
145-
if (result > 10) {
146-
count = 0;
147-
}
148-
return result;
149-
});
142+
let count = $state(0);
143+
144+
let even = $state(true);
145+
146+
let odd = $derived.by(() => {
147+
even = count % 2 === 0;
148+
return !even;
149+
});
150150
</script>
151151
152-
<button onclick={() => count++}>{count} / {multiple}</button>
152+
<button onclick={() => count++}>{count}</button>
153+
154+
<p>{count} is even: {even}</p>
155+
<p>{count} is odd: {odd}</p>
153156
```
154157

155-
Here, the `$derived` updates `count`, which is `$state` and therefore forbidden to do. It is forbidden because the reactive graph could become unstable as a result, leading to subtle bugs, like values being stale or effects firing in the wrong order. To prevent this, Svelte errors when detecting an update to a `$state` variable.
158+
This is forbidden because it introduces instability: if `<p>{count} is even: {even}</p>` is updated before `odd` is recalculated, `even` will be stale. In most cases the solution is to make everything derived:
159+
160+
```js
161+
let even = $derived(count % 2 === 0);
162+
let odd = $derived(!even);
163+
```
156164

157-
To fix this:
158-
- See if it's possible to refactor your `$derived` such that the update becomes unnecessary
159-
- Think about why you need to update `$state` inside a `$derived` in the first place. Maybe it's because you're using `bind:`, which leads you down a bad code path, and separating input and output path (by splitting it up to an attribute and an event, or by using [Function bindings](bind#Function-bindings)) makes it possible avoid the update
160-
- If it's unavoidable, you may need to use an [`$effect`]($effect) instead. This could include splitting parts of the `$derived` into an [`$effect`]($effect) which does the updates
165+
If side-effects are unavoidable, use [`$effect`]($effect) instead.
161166

162167

163168
## Server errors

0 commit comments

Comments
 (0)