Reactivity
38 bites tagged Reactivity — interview questions with model answers, and 60-second explainers.
How does Svelte update the DOM without a Virtual DOM?
This tests compile-time versus runtime framework architecture. A strong answer says Svelte compiles components into imperative JS that surgically updates the DOM when reactive state changes. A red flag is claiming it uses a hidden VDOM or dirty checking.
Compare and contrast Vue 3 and Svelte reactivity systems
Tests runtime versus compile-time trade-offs. Contrast Vue 3 Proxy interception with Svelte compile-time assignment transforms. Vue tracks dependencies dynamically during effects; Svelte resolves them at build. Red flag: claiming both use runtime Proxies.
Svelte Keyed each: Identity, Not Index
Svelte keyed each blocks track list items by identity, not index. Without a key, reordering or filtering leaves component state attached to the wrong DOM position. Using the array index as the key silently defeats the purpose and preserves the bug.
Svelte's `bind:`: Two-Way Data Binding Made Simple
Svelte's `bind:` turns one-way data flow into a two-way street, letting child elements update parent state. It's essential for syncing form inputs without manual event handlers. The footgun: an invalid number input yields `undefined`, not 0.
Svelte's Reactivity: A Compiler, Not a Library
Svelte achieves reactivity at compile time, not runtime. It's a compiler that turns your component files into efficient, imperative JavaScript that updates the DOM directly, skipping the virtual DOM. The footgun: reactivity only triggers on assignment.
Framework Reactivity: Coarse vs. Fine-Grained Updates
Frameworks sync UI and state differently. Coarse-grained systems like React re-run component code, while fine-grained systems like Vue (Proxies) or Angular (Signals) track dependencies to update only what's needed.
Svelte's Legacy immutable={true} Optimization
The `immutable={true}` option was a contract with the Svelte 3/4 compiler: you promise to never mutate data, and it uses fast referential checks for updates. It was a performance boost for immutable patterns.
Svelte Derived Stores: Reactive Values from Other Stores
A Svelte derived store is like a spreadsheet formula for your state. It listens to other stores and automatically computes a new value whenever they change. The footgun is trying to write to it—it's read-only; you must update its sources instead.
Vue Watchers: Running Code on State Changes
Vue watchers are tripwires for your data. When a specific piece of state changes, a watcher executes code, like fetching data from an API. Use them for side effects, not for deriving new values. The footgun is using a watcher where a computed property would.
Vue Computed Properties: Derived Values for Cleaner Templates
A Vue computed property is a reactive 'formula' that derives its value from other data. Use it to move complex logic out of your templates, keeping them clean and readable.
ref() vs. reactive(): Vue's Two Flavors of Reactivity
ref() is a box for any value (primitive or object) that you must access with .value. reactive() is a proxy for objects only, which you access directly. Use ref() for single values, reactive() for grouping data. The footgun: reactive() fails on primitives.
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 Lifecycle: Mount, Destroy, and Tick
Svelte 5 simplifies the component lifecycle to just two events: creation (`onMount`) and destruction (`onDestroy`). Use `onMount` for DOM setup and return a cleanup function from it. The cleanup only works if the main callback is synchronous, not async.
Vue's Reactivity: JavaScript That Acts Like a Spreadsheet
Vue's reactivity system makes your data act like a spreadsheet: change a value, and dependent parts of your app update automatically. It works by wrapping your data in special objects. The footgun: reactivity is lost if you replace a whole object.
Get Reactivity bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.