Skip to content
tezvyn:

How does Angular's Zone.js change detection differ from Vue and Svelte reactivity?

Source: blog.openreplay.comMediumHow cards are made

How does Angular's Zone.js change detection differ from Vue and Svelte reactivity?

Tests granular reactivity architecture. Angular Zone.js monkey-patches async to scan the full component tree; Vue uses runtime Proxy tracking; Svelte compiles runes into targeted DOM bindings.

What's really being asked

Whether you understand the architectural granularity of reactivity models and can articulate why Angular's legacy Zone.js approach incurs different performance costs than Vue's Proxy system or Svelte's compiler-driven runes. Interviewers want to see you know Angular is transitioning to Signals, not just reciting documentation.

The full answer

First, explain that Angular's traditional change detection is coarse-grained: Zone.js monkey-patches browser async APIs like setTimeout and Promise to notify Angular after every async task, prompting a top-down dirty-check of the component tree regardless of which state changed. Second, contrast this with Vue 3's fine-grained runtime reactivity: JavaScript Proxies intercept property access to build a dependency graph automatically, so only subscribers to a specific ref or reactive object re-run. Third, describe Svelte 5's fine-grained compiler approach: runes like state and derived are processed at build time into direct DOM binding updates, eliminating virtual DOM and runtime diffing overhead entirely. Fourth, address performance implications: Zone.js introduces monkey-patch overhead and wastes cycles checking components unaffected by a state change, which scales poorly in large trees; Vue and Svelte avoid this by narrowing updates to exact consumers. Fifth, mention Angular's modern pivot: Signals introduced in Angular 16 track their own consumers and enable zoneless change detection, moving Angular toward fine-grained reactivity similar to Vue but with explicit signal reads rather than transparent Proxies.

The mistakes people make

Calling Zone.js fine-grained or claiming it tracks individual dependencies. Saying Angular currently requires Zone.js without acknowledging the optional zoneless Signals path. Confusing Svelte's runes with runtime reactivity like Vue; Svelte's optimization happens at compile time. Attributing Vue's reactivity to a compiler step instead of runtime Proxies. Ignoring performance entirely or hand-waving that Angular is slow without citing tree-scanning overhead.

What usually comes next

How would you optimize a large Angular application still using Zone.js? When would you choose OnPush change detection and what are its limitations compared to Signals? How does Angular Signals explicit consumer tracking differ from Vue's automatic Proxy trapping? If Svelte compiles away reactivity, what debugging tradeoffs exist?

A concrete example

Imagine a dashboard with 500 components where only one nested counter increments. In legacy Angular with Zone.js, the counter click triggers Zone.js after the async event, and Angular dirty-checks all 500 components. In Vue, the counter ref change notifies only the computed or DOM nodes that read it, skipping the other 499. In Svelte 5, the compiler already wired the $state variable directly to that specific text node, so the update is a single DOM operation with no runtime tree traversal at all.

Interview question

Why does a single state change in legacy Angular often result in more work than in Vue or Svelte?

  • a.Angular uses runtime Proxies to track which components access which state, while Vue monkey-patches async APIs for full tree scans and Svelte compiles updates into DOM bindings.
  • b.Zone.js creates a fine-grained dependency graph via Proxies so only components reading the changed state re-render, while Vue and Svelte fall back to full tree scans.
  • c.Zone.js monkey-patches async APIs to notify Angular after every task, prompting a top-down dirty-check of the entire component tree regardless of which state changed.Correct
  • d.Angular compiles state changes into direct DOM bindings at build time, but Vue uses a virtual DOM diff and Svelte monkey-patches async APIs to detect changes.
Why?

Zone.js intercepts async browser APIs to trigger a complete top-down dirty-check of the component tree even when only one piece of state changes. Distractor A incorrectly attributes fine-grained Proxy-based dependency tracking to Zone.js, which is actually how Vue achieves targeted updates.

Just read this? Test yourself on what you have been reading.

Read the original → blog.openreplay.com

You just looked this up. Could you explain it out loud?

That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.

The iPhone app is on the way

We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.

Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.

Get it on Google PlayiPhone app coming soon

We are hiring for this. Open roles that interview on angular — each one lists the topics its interview covers.

See open roles