docs: move some `$state` information around

pull/15969/head
Rich Harris 4 months ago committed by GitHub
parent de8094910d
commit 91fac6f6bc
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

@ -20,8 +20,6 @@ Unlike other frameworks you may have encountered, there is no API for interactin
If `$state` is used with an array or a simple object, the result is a deeply reactive _state proxy_. [Proxies](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) allow Svelte to run code when you read or write properties, including via methods like `array.push(...)`, triggering granular updates.
> [!NOTE] Class instances are not proxied. You can create [reactive state fields](#Classes) on classes that you define. Svelte provides reactive implementations of built-ins like `Set` and `Map` that can be imported from [`svelte/reactivity`](svelte-reactivity).
State is proxified recursively until Svelte finds something other than an array or simple object. In a case like this...
```js
@ -67,7 +65,7 @@ todos[0].done = !todos[0].done;
### Classes
You can also use `$state` in class fields (whether public or private), or as the first assignment to a property immediately inside the `constructor`:
Class instances are not proxied. Instead, you can use `$state` in class fields (whether public or private), or as the first assignment to a property immediately inside the `constructor`:
```js
// @errors: 7006 2554
@ -121,6 +119,8 @@ class Todo {
}
```
> Svelte provides reactive implementations of built-in classes like `Set` and `Map` that can be imported from [`svelte/reactivity`](svelte-reactivity).
## `$state.raw`
In cases where you don't want objects and arrays to be deeply reactive you can use `$state.raw`.
@ -145,6 +145,8 @@ person = {
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 raw state can _contain_ reactive state (for example, a raw array of reactive objects).
As with `$state`, you can declare class fields using `$state.raw`.
## `$state.snapshot`
To take a static snapshot of a deeply reactive `$state` proxy, use `$state.snapshot`:

Loading…
Cancel
Save