Framework Reactivity: React, Vue, Svelte & Solid
Learn the interview-ready mental model, practical trade-offs, and production patterns for this web fundamentals topic.
Topic content
Every framework solves the same problem — efficiently updating the DOM when state changes — but they differ in where dependency tracking happens, how updates are scheduled, and how much work reaches the browser. Understanding these mechanics helps you write better code and make informed framework decisions.
State change = event. Frameworks differ in how they detect the event, who gets notified, and how much work is done to update the UI. React re-runs whole components. Vue tracks exact dependencies. Svelte generates precise update code at build time. Solid uses explicit fine-grained signals.
1React Reactivity
Re-renders components on state change, then reconciles the virtual DOM. Updates are batched and prioritized by the scheduler. Coarse-grained by default — optimization comes from memoization, keys, and boundaries.
const [count, setCount] = useState(0);
return <button onClick={() => setCount(c => c + 1)}>{count}</button>;2Vue Reactivity
Uses Proxy-based tracking. Reads during render create fine-grained dependencies. Only affected effects/computeds re-run. Strong DX but requires care with refs and destructuring.
3Svelte & Solid
Svelte moves reactivity to compile time — assignments trigger targeted DOM updates. Solid uses explicit signals for precise runtime updates without component re-renders.
- ✓Reactivity = dependency tracking + scheduling + minimal DOM updates
- ✓React: re-render + diff (coarse but predictable)
- ✓Vue: proxy-based fine-grained tracking
- ✓Svelte: compile-time reactivity (minimal runtime)
- ✓Solid: explicit signals for precise updates
- ✓State placement and component boundaries matter more than framework choice
- ✓Always measure real user metrics — not just framework benchmarks