How do Vue, Angular, and Svelte stores trigger component re-renders?

WHAT THIS TESTS: This question probes whether you understand the architectural differences between push-based, pull-based, and compiler-driven reactivity rather than just API familiarity. Interviewers want to see that you know how state change propagates from a central store to the view in three distinct ecosystems and why those mechanisms matter for performance and mental models.

A GOOD ANSWER COVERS: First, Vue with Pinia relies on Vue's proxy-based reactivity system. When a component accesses store state during render, Vue tracks that dependency. If the store mutates state through a proxy setter, Vue triggers the component to re-render because the dependency list is invalidated. Second, Angular with NgRx is built on RxJS. Store slices are Observables. In a typical component, you expose store selections as Observables and bind them in the template with the async pipe, which internally calls markForCheck on the host view. With OnPush change detection, that is the signal to re-render. Without the async pipe, a manual subscription requires calling detectChanges or markForCheck to avoid a stale view. Third, Svelte uses compiler-generated code. A Svelte store is an object with a subscribe method. When a component references a store value with the auto-subscription syntax, the compiler injects subscription and invalidation logic. On store update, the callback invalidates the local variable and schedules a microtask to update the DOM directly without a virtual DOM. The component does not re-render in the framework sense; it surgically updates the DOM nodes that depend on the store.

COMMON WRONG ANSWERS: Saying all three use a virtual DOM diff after every state change. Claiming Pinia requires explicit event emitters or that NgRx automatically updates the view without any subscription mechanism. Asserting that Svelte uses proxies or signals instead of compiler-generated invalidation. Another red flag is conflating the store pattern with change detection, such as saying the store itself calls the component's render method directly.

LIKELY FOLLOW-UPS: How does OnPush change detection in Angular interact with NgRx selectors? Why can Vue's reactivity system be harder to debug with deeply nested state compared to explicit RxJS streams? How would you handle derived state in each ecosystem, for example computed properties in Pinia, reselect in NgRx, or derived stores in Svelte? What are the memory leak risks when subscribing manually versus using auto-subscriptions or the async pipe?

ONE CONCRETE EXAMPLE: Imagine a user clicks a button that increments a counter in the store. In Vue, the Pinia store mutates a reactive ref. The component that read count during its last render is in Vue's dependency map, so Vue queues a re-render for that component. In Angular, the reducer produces new state, the store BehaviorSubject emits, the async pipe in the template receives the new value and calls markForCheck, and Angular's change detection runs on that component branch. In Svelte, the writable store updates its value and calls its subscribers. The compiled component marks the local count variable as dirty and schedules a DOM update that changes only the text node showing the number.