Skip to content

Commit e463457

Browse files
sync svelte docs
1 parent ea568ee commit e463457

File tree

2 files changed

+48
-0
lines changed

2 files changed

+48
-0
lines changed

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

+24
Original file line numberDiff line numberDiff line change
@@ -133,3 +133,27 @@ Reading state that was created inside the same derived is forbidden. Consider us
133133
```
134134
Updating state inside a derived or a template expression is forbidden. If the value should not be reactive, declare it without `$state`
135135
```
136+
137+
This error is thrown in a situation like this:
138+
139+
```svelte
140+
<script>
141+
let count = $state(0);
142+
let multiple = $derived.by(() => {
143+
const result = count * 2;
144+
if (result > 10) {
145+
count = 0;
146+
}
147+
return result;
148+
});
149+
</script>
150+
151+
<button onclick={() => count++}>{count} / {multiple}</button>
152+
```
153+
154+
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.
155+
156+
To fix this:
157+
- See if it's possible to refactor your `$derived` such that the update becomes unnecessary
158+
- 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
159+
- 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

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

+24
Original file line numberDiff line numberDiff line change
@@ -141,6 +141,30 @@ Reading state that was created inside the same derived is forbidden. Consider us
141141
Updating state inside a derived or a template expression is forbidden. If the value should not be reactive, declare it without `$state`
142142
```
143143

144+
This error is thrown in a situation like this:
145+
146+
```svelte
147+
<script>
148+
let count = $state(0);
149+
let multiple = $derived.by(() => {
150+
const result = count * 2;
151+
if (result > 10) {
152+
count = 0;
153+
}
154+
return result;
155+
});
156+
</script>
157+
158+
<button onclick={() => count++}>{count} / {multiple}</button>
159+
```
160+
161+
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.
162+
163+
To fix this:
164+
- See if it's possible to refactor your `$derived` such that the update becomes unnecessary
165+
- 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
166+
- 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
167+
144168

145169
## Server errors
146170

0 commit comments

Comments
 (0)