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.