chore: tweak `$state.is` warning docs a bit more (#12605)

pull/12583/head
Rich Harris 2 months ago committed by GitHub
parent 5a07219836
commit db7652116e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

@ -42,22 +42,26 @@
> Reactive `$state(...)` proxies and the values they proxy have different identities. Because of this, comparisons with `%operator%` will produce unexpected results. Consider using `$state.is(a, b)` instead%details% > Reactive `$state(...)` proxies and the values they proxy have different identities. Because of this, comparisons with `%operator%` will produce unexpected results. Consider using `$state.is(a, b)` instead%details%
`$state(...)` does create a proxy of the value it is passed. Therefore, the resulting object has a different identity and equality checks will always return `false`: `$state(...)` creates a [proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) of the value it is passed. The proxy and the value have different identities, meaning equality checks will always return `false`:
```svelte ```svelte
<script> <script>
let object = { foo: 'bar' }; let value = { foo: 'bar' };
let state_object = $state(object); let proxy = $state(value);
object === state_object; // always false
value === proxy; // always false
</script> </script>
``` ```
Most of the time this will not be a problem in practise because it is very rare to keep the original value around to later compare it against a state value. In case it happens, Svelte will warn you about it in development mode and suggest to use `$state.is` instead, which is able to unwrap the proxy and compare the original values: In the rare case that you need to compare them, you can use `$state.is`, which unwraps proxies:
```svelte ```svelte
<script> <script>
let object = { foo: 'bar' }; let value = { foo: 'bar' };
let state_object = $state(object); let proxy = $state(value);
$state.is(object, state_object); // true
$state.is(value, proxy); // true
</script> </script>
``` ```
During development, Svelte will warn you when comparing values with proxies.

Loading…
Cancel
Save