Framework Reactivity: React, Vue, Svelte & Solid
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.
| Property | React | Vue | Svelte | Solid |
|---|---|---|---|---|
| Strength | Predictable, mature ecosystem | Excellent DX + automatic tracking | Minimal runtime overhead | No virtual DOM, pure reactivity |
| Tracking | Re-render + diff (virtual DOM) | Proxy + dependency graph | Compile-time (compiler emits code) | Explicit signals + reactive graph |
| Granularity | Component-level | Fine-grained (property level) | Very fine-grained | Extremely fine-grained |
| Runtime Cost | Higher (reconciliation) | Medium | Very low | Very low |
React
Strength
Predictable, mature ecosystem
Tracking
Re-render + diff (virtual DOM)
Granularity
Component-level
Runtime Cost
Higher (reconciliation)
Vue
Strength
Excellent DX + automatic tracking
Tracking
Proxy + dependency graph
Granularity
Fine-grained (property level)
Runtime Cost
Medium
Svelte
Strength
Minimal runtime overhead
Tracking
Compile-time (compiler emits code)
Granularity
Very fine-grained
Runtime Cost
Very low
Solid
Strength
No virtual DOM, pure reactivity
Tracking
Explicit signals + reactive graph
Granularity
Extremely fine-grained
Runtime Cost
Very low
Common questions
- ›“How does reactivity work in React vs Vue?”
- ›“Why is Svelte/Solid often faster than React?”
- ›“What are the trade-offs of fine-grained vs coarse-grained reactivity?”
- ›“How would you optimize a slow React component?”
What interviewers look for
- Mechanics over syntax (tracking, scheduling, commit)
- Understanding of re-renders vs fine-grained updates
- Awareness of real costs (bundle size, hydration, browser pipeline)
- Architecture thinking (boundaries, state placement)
Short answer (60 sec)
React re-renders components and diffs the tree. Vue tracks dependencies with proxies for fine-grained updates. Svelte compiles reactivity away at build time. Solid uses explicit signals for precise runtime updates. The key is minimizing unnecessary work reaching the DOM.
Detailed answer (senior level)
All frameworks solve dependency tracking + scheduling + DOM commit. React uses a render + reconciliation model. Vue builds a reactive dependency graph. Svelte shifts work to the compiler. Solid keeps fine-grained reactivity at runtime without VDOM. Senior answers connect these to real performance: bundle size, hydration, layout thrashing, and scheduling under frame budgets.
- Thinking re-renders are always expensive in React
- Losing reactivity in Vue by destructuring reactive objects
- Over-relying on framework defaults without understanding boundaries
- Ignoring browser costs (layout/paint) and blaming only the framework
- Creating unnecessary shared state that triggers wide updates
- ✓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
Related web fundamentals topics
Continue with closely related browser and frontend engineering concepts.