Modern JavaScript frameworks such as React, Vue, and Angular provide ways to build reactive applications, where the UI updates automatically whenever the underlying data changes. Unlike Svelte, which compiles reactivity at build time, these frameworks rely on runtime mechanisms to detect changes and update the DOM.
React: Uses a Virtual DOM. When state changes, React re-renders the component tree and compares it to a virtual DOM snapshot to determine minimal updates to the real DOM.
Vue: Implements a reactivity system using getters and setters (Proxies in Vue 3). It tracks dependencies and automatically updates components when data changes.
Angular: Uses two-way data binding with a change detection mechanism. Angular automatically synchronizes the data between the model and the UI.
In this React example, the useState hook creates a reactive variable count. When setCount is called, React re-renders the component and updates the UI automatically.
In Vue, the data object is reactive by default. When count changes, Vue automatically tracks dependencies and updates the DOM efficiently.
These frameworks make reactivity possible at runtime by using techniques like virtual DOM diffing (React), dependency tracking (Vue), and change detection (Angular). Svelte, in contrast, compiles reactivity into optimized JavaScript during build time, avoiding extra runtime overhead.