How does reactivity work in Svelte?

Answer

Svelte's reactivity is based on variable assignment — assigning a new value to a variable automatically triggers DOM updates. let count = 0; function increment() { count++; } — Svelte's compiler tracks that count is used in the template and generates code to update the DOM when count changes. This is different from React (where you call setState) or Vue (where you use reactive objects). Reactive declarations ($:) create computed values and side effects: $: doubled = count * 2;doubled is automatically recalculated whenever count changes. $: console.log(count); runs the statement whenever its dependencies change. Array mutations require reassignment to trigger updates: items = [...items, newItem] — push alone won't work.