Svelte's Reactive Assignments with `$: `
Think of Svelte's `$: ` as a magic label that automatically re-runs code when its inputs change. It's used to create derived values, like `$: sum = a + b`. The footgun: the compiler only tracks direct dependencies, not those hidden inside function calls.
Svelte's reactive `$: ` is like a spreadsheet formula for your code. Prefix any top-level statement with `$: ` and it will automatically re-run whenever its dependencies change. This is the legacy way to create derived values (`$: sum = a + b`) or trigger side effects. The main footgun is that dependencies are determined at compile time; Svelte won't re-run the statement if a dependency is hidden inside a function call.
Read the original → svelte.dev
- #svelte
- #reactivity
- #frontend
- #javascript
Get five bites like this every day.
Tezvyn delivers a daily feed of 60-second tech bites with quizzes to lock in what you learn.