Deep dive into modern frameworks Reactivity🔬⚛️ by Sylvain Dedieu

JavaScript is not reactive by default - frameworks need to add reactivity mechanisms

Three main approaches to reactivity in modern frameworks:

• Value-based (React, Angular) - Comparing previous and current state
• Observable-based (RxJS) - Asynchronous data streams
• Signal-based (Solid, Angular Signals) - Synchronous reactive values

Angular’s zone.js patch tracks DOM changes globally but has performance implications, leading to shift towards signals

Change Detection Strategy OnPush improves performance by only checking components when inputs change or events occur

React uses value-based approach with setState() and memo() for optimization, putting responsibility on developers

Signals provide synchronous reactivity with better developer experience compared to observables:

• No need to manually subscribe/unsubscribe
• Avoid async timing issues
• More predictable behavior

Vue uses proxies and getters/setters for reactivity under the hood

Performance considerations:

• Value-based can lead to unnecessary re-renders
• Observable-based has async complexity
• Signal-based provides fine-grained updates

Framework evolution trending towards signals for better performance and developer experience

Each approach has tradeoffs - no single “best” solution for all use cases