You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: documentation/docs/03-runes/01-state.md
+16-15
Original file line number
Diff line number
Diff line change
@@ -66,32 +66,33 @@ Objects and arrays are made deeply reactive by wrapping them with [`Proxies`](ht
66
66
<button onclick={() => (entries[1].text = 'baz')}>change second entry text</button>
67
67
```
68
68
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
70
70
71
71
## `$state.frozen`
72
72
73
73
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:
74
74
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
+
});
82
80
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)
// this will work, because we're creating a new person
85
+
person = {
86
+
name:'Heraclitus',
87
+
age:50
88
+
};
90
89
```
91
90
92
91
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).
93
92
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(...)`.
0 commit comments