core/reactivity

14 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

SvelteURL reactive version of URL

SvelteURL is a reactive version of the built-in URL object. Reading URL properties such as href or pathname in an effect or derived will cause it to be re-evaluated when the URL changes. The searchParams property is an instance of SvelteURLSearchParams. Changes to protocol, hostname, or pathname properties will update href and vice versa.

SvelteURLSearchParams reactive version of URLSearchParams

SvelteURLSearchParams is a reactive version of the built-in URLSearchParams object. Reading its contents by iterating, or calling params.get() or params.getAll() in an effect or derived will cause it to be re-evaluated when the params are updated.

createSubscriber integrates external event systems

createSubscriber is available since Svelte 5.7.0 and returns a subscribe function that integrates external event-based systems with Svelte's reactivity. It is particularly useful for integrating with web APIs like MediaQuery, IntersectionObserver, or WebSocket. The start callback receives an update function; calling update triggers effect re-runs. If start returns a cleanup function, it is called when the effect is destroyed. If subscribe is called in multiple effects, start is only called once while effects are active, and the cleanup function is only called when all effects are destroyed.

createSubscriber function signature

createSubscriber has the signature: function createSubscriber(start: (update: () => void) => (() => void) | void): () => void. The start parameter is a callback that receives an update function and optionally returns a cleanup function.

MediaQuery reactive built-in

MediaQuery is a reactive built-in available since Svelte 5.7.0 that creates a media query and provides a current property reflecting whether the media query matches. Constructor takes a query string parameter (the media query string) and an optional fallback parameter for server-side rendering. Use CSS media queries if possible instead of MediaQuery during server-side rendering, as there is no way to know the correct value, potentially causing content to change upon hydration.

SvelteDate reactive version of Date

SvelteDate is a reactive version of the built-in Date object. Reading the date via methods like getTime() or toString(), or via Intl.DateTimeFormat, in an effect or derived will cause it to be re-evaluated when the date value changes. Constructor accepts the same parameters as the native Date constructor.

SvelteMap reactive version of Map

SvelteMap is a reactive version of the built-in Map object. Reading map contents by iterating, reading map.size, or calling map.get() or map.has() in an effect or derived will cause it to be re-evaluated when the map is updated. Constructor accepts an optional iterable of key-value pairs. Values in a reactive map are not made deeply reactive.

SvelteSet reactive version of Set

SvelteSet is a reactive version of the built-in Set object. Reading set contents by iterating, reading set.size, or calling set.has() in an effect or derived will cause it to be re-evaluated when the set is updated. Constructor accepts an optional iterable of values. Values in a reactive set are not made deeply reactive.

non_reactive_update warning

The `non_reactive_update` warning is thrown when a variable is declared without `$state` or `$state.raw`, then reassigned and read in a reactive context. Changing the value will not trigger updates. The variable should be wrapped with `$state` to fix this.

reactive_declaration_invalid_placement warning

The `reactive_declaration_invalid_placement` warning alerts that reactive declarations only exist at the top level of the instance script.

reactive_declaration_module_script_dependency warning

The `reactive_declaration_module_script_dependency` warning alerts that reassignments of module-level declarations will not cause reactive statements to update.

store_rune_conflict warning

The `store_rune_conflict` warning alerts when using a `$%name%` rune but there is a local binding with the same name (without the `$`). Referencing a local variable with a `$` prefix creates a store subscription, creating ambiguity. The local variable should be renamed to avoid the conflict.

Legacy mode: reactive let/var at component top level

In legacy mode, variables declared at the top level of a component are automatically considered reactive. Reassigning or mutating these variables (such as count += 1 or object.x = y) will cause the UI to update.

Legacy mode: assignment-based reactivity requires explicit assignment after mutations

Legacy mode reactivity is based on assignments. Using array methods like .push() and .splice() will not automatically trigger updates. A subsequent assignment to the variable is required to tell the compiler to update the UI.

Give your agent this brain