Type $state variable
You can type `$state` like any other variable using a type annotation, for example `let count: number = $state(0)`. If you don't give `$state` an initial value, the type will include `undefined`.
Svelte · Language · all subjects
core/runes: $state
11 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
Type $state without initial value using generic parameter
You can pass the type directly as a generic parameter to `$state` to safely handle undefined initial values. For example, `let count = $state<number>()` will infer the variable as `number | undefined`.
Use 'as' casting with $state in classes
In class contexts where you know a `$state` variable will be defined before first use, use an `as` casting to avoid type errors. For example: `count = $state() as number;` in a constructor that initializes the value.
state_proxy_equality_mismatch warning
$state(...) creates a proxy of the value. The proxy and the original value have different identities, so equality checks with === will always return false. To fix, ensure both values are created with $state(...), or neither are. Note that $state.raw(...) does not create a proxy.
$state.snapshot cannot clone certain values
$state.snapshot attempts to clone a value to return a reference that no longer changes. Certain objects cannot be cloned (for example DOM elements), in which case the original uncloned value is returned. The warning lists which properties could not be cloned and were returned as originals.
$state.snapshot for one-off logging
Use $state.snapshot() to take a snapshot of a current $state value for one-off logging (for example inside an event handler), rather than logging the proxy directly.
Compiler error: state_field_duplicate
The specified name has already been declared as a state field on the class.
Compiler error: state_field_invalid_assignment
Cannot assign to a state field before its declaration.
Compiler error: state_invalid_export
Cannot export state from a module if it is reassigned. Either export a function returning the state value or only mutate the state value's properties.
Compiler error: state_invalid_placement
The specified rune can only be used as a variable declaration initializer, a class field declaration, or the first assignment to a class field at the top level of the constructor.
state_proxy_equality_mismatch warning: $state proxy identity differs
The warning 'Reactive `$state(...)` proxies and the values they proxy have different identities. Because of this, comparisons with `%operator%` will produce unexpected results' indicates that a `$state(...)` proxy is being compared with the original value. `$state(...)` creates a proxy of the value it is passed, and the proxy and the value have different identities, so equality checks will always return `false`. To resolve this, ensure both values were created with `$state(...)`, or neither were. Note that `$state.raw(...)` will not create a state proxy.