Skip to content

Commit bc4a456

Browse files
Rich-Harristrueadm
authored andcommitted
docs: tweak snapshot example (#12426)
1 parent 0196a1e commit bc4a456

File tree

1 file changed

+16
-15
lines changed

1 file changed

+16
-15
lines changed

documentation/docs/03-runes/01-state.md

+16-15
Original file line numberDiff line numberDiff line change
@@ -66,32 +66,33 @@ Objects and arrays are made deeply reactive by wrapping them with [`Proxies`](ht
6666
<button onclick={() => (entries[1].text = 'baz')}>change second entry text</button>
6767
```
6868

69-
> Only POJOs (plain of JavaScript objects) are made deeply reactive. Reactivity will stop at class boundaries and leave those alone
69+
> Only POJOs (plain old JavaScript objects) are made deeply reactive. Reactivity will stop at class boundaries and leave those alone
7070
7171
## `$state.frozen`
7272

7373
State declared with `$state.frozen` cannot be mutated; it can only be _reassigned_. In other words, rather than assigning to a property of an object, or using an array method like `push`, replace the object or array altogether if you'd like to update it:
7474

75-
```svelte
76-
<script>
77-
let entries = $state([
78-
{ id: 1, text: 'foo' },
79-
{ id: 2, text: 'bar' }
80-
]);
81-
</script>
75+
```js
76+
let person = $state.frozen({
77+
name: 'Heraclitus',
78+
age: 49
79+
});
8280

83-
{#each entries as entry (entry.id)}
84-
{entry.text}
85-
{/each}
81+
// this will have no effect (and will throw an error in dev)
82+
person.age += 1;
8683

87-
<button onclick={() => (entries = [entries[0], { id: entries[1].id, text: 'baz' }])}
88-
>change second entry text</button
89-
>
84+
// this will work, because we're creating a new person
85+
person = {
86+
name: 'Heraclitus',
87+
age: 50
88+
};
9089
```
9190

9291
This can improve performance with large arrays and objects that you weren't planning to mutate anyway, since it avoids the cost of making them reactive. Note that frozen state can _contain_ reactive state (for example, a frozen array of reactive objects).
9392

94-
> Objects and arrays passed to `$state.frozen` will be shallowly frozen using `Object.freeze()`. If you don't want this, pass in a clone of the object or array instead. The argument cannot be an existing state proxy created with `$state(...)`.
93+
In development mode, the argument to `$state.frozen` will be shallowly frozen with `Object.freeze()`, to make it obvious if you accidentally mutate it.
94+
95+
> Objects and arrays passed to `$state.frozen` will have a `Symbol` property added to them to signal to Svelte that they are frozen. If you don't want this, pass in a clone of the object or array instead. The argument cannot be an existing state proxy created with `$state(...)`.
9596
9697
## `$state.snapshot`
9798

0 commit comments

Comments
 (0)